diff --git a/apps/site/src/content/articles/design-with-gel/content.mdoc b/apps/site/src/content/articles/design-with-gel/content.mdoc
index 3ca9704c1..a839b3f58 100644
--- a/apps/site/src/content/articles/design-with-gel/content.mdoc
+++ b/apps/site/src/content/articles/design-with-gel/content.mdoc
@@ -16,11 +16,11 @@ In practical terms and in its simplest form, it's a set of assets and guidelines
 
 First and foremost, usability and accessibility has to be the foundation from which we design. Luckily, GEL elements, components, and patterns are all user tested and accessibility tested. Bonus! However, it’s important to remember that context can change many things as can the way products are built in code, so user and accessibility testing should always be part of your project.
 
-UX designers can access component and pattern rationale through Confluence, use tools like the Forms paper prototyping sheets to rapidly prototype low fidelity user journeys and screens, and see forms components and patterns in action through [Protoform](https://gel.westpacgroup.com.au/protoform).
+UX designers can access component and pattern rationale through Confluence, use tools like the Forms paper prototyping sheets to rapidly prototype low fidelity user journeys and screens, and see forms components and patterns in Figma.
 
-UI designers can access design assets from the [Figma Libraries](/articles/figma-libraries), and get up to speed on our brand and design standards such as [Typography](/articles/typography) and [Colour](/articles/colour) elsewhere on the GEL website. Assemble high quality mock-ups and prototypes using the [Figma Libraries](/articles/figma-libraries) while [Protoform](https://gel.westpacgroup.com.au/protoform) is another useful tool for seeing the behaviour of components and patterns.
+UI designers can access design assets from the [Figma Libraries](/articles/figma-libraries), and get up to speed on our brand and design standards such as [Typography](/articles/typography) and [Colour](/articles/colour) elsewhere on the GEL website. Assemble high quality mock-ups and prototypes using the [Figma Libraries](/articles/figma-libraries).
 
-Developers can go straight to the [design system](/design-system) to read implementation guidelines and access code, while also referencing [Protoform](https://gel.westpacgroup.com.au/protoform), our interactive demonstration of common form patterns. [Protoform](https://gel.westpacgroup.com.au/protoform) provides best-practice consideration for responsive layout, WCAG accessibility compliance, user experience and brand requirements.
+Developers can go straight to the [design system](/design-system) to read implementation guidelines and access code, and learn best-practice consideration for responsive layout, WCAG accessibility compliance, user experience and brand requirements.
 
 ## I want to design the interface my way
 
diff --git a/apps/site/src/content/design-system/components/autocomplete/accessibility/notes-on-accessibility/content.mdoc b/apps/site/src/content/design-system/components/autocomplete/accessibility/notes-on-accessibility/content.mdoc
new file mode 100644
index 000000000..6c943f328
--- /dev/null
+++ b/apps/site/src/content/design-system/components/autocomplete/accessibility/notes-on-accessibility/content.mdoc
@@ -0,0 +1,21 @@
+All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fall under the [four principles of accessibility](/design-system/accessibility/design-system-accessibility) – Perceivable, Operable, Understandable and Robust. Below are some specific ways in which this component follows these principles:
+
+### Perceivable
+
+*Autocomplete field-* These input fields have been designed and tested to have the correct amount of contrast and line weight around the border. This is important so as to quickly recognise the field as an affordance and also greatly assists those with low vision, and those without extensive knowledge of web design trends.
+
+*Input labels -* Input labels should be placed above the input field. This helps promote scanning, readability and faster progress.
+
+*Hint text -* Hint text should be placed directly under the input label for context. This also ensures on mobile the hint text is visible ‘on canvas’ and is not obscured by any select boxes or keypads when activated.
+
+### Operable
+
+The Design System components have been coded to be navigable using a keyboard and other assistive technologies. WCAG compliance recommends being aware of the time it takes for people to complete tasks and to not automatically move focus. Animation should be controlled and simple so as not to cause seizures, and it’s important to provide the ability to perform the same task in multiple ways where possible. These rules have been followed where navigation and interaction is included in Design System components or patterns.
+
+### Understandable
+
+WCAG compliance requires consistent and predicable interactions, clear and simple language, concise labels, no jargon or abbreviations and clear error messaging. These rules have been followed where content and interactions are included in Design System components or patterns.
+
+### Robust
+
+A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control.
diff --git a/apps/site/src/content/design-system/components/autocomplete/design/autocomplete/content.mdoc b/apps/site/src/content/design-system/components/autocomplete/design/autocomplete/content.mdoc
new file mode 100644
index 000000000..b74f9a978
--- /dev/null
+++ b/apps/site/src/content/design-system/components/autocomplete/design/autocomplete/content.mdoc
@@ -0,0 +1,19 @@
+```jsx
+<Autocomplete
+  errorMessage="Error message goes here"
+  hintMessage="Search for the appropriate colour"
+  label="What colour is the sky?"
+  noOptionsMessage="No options"
+  validationState="invalid"
+>
+  <Autocomplete.Item>
+    Green
+  </Autocomplete.Item>
+  <Autocomplete.Item>
+    Purple
+  </Autocomplete.Item>
+  <Autocomplete.Item>
+    Blue
+  </Autocomplete.Item>
+</Autocomplete>
+```
diff --git a/apps/site/src/content/design-system/components/autocomplete/design/dos-and-don-ts/content.mdoc b/apps/site/src/content/design-system/components/autocomplete/design/dos-and-don-ts/content.mdoc
new file mode 100644
index 000000000..2fb14c0d1
--- /dev/null
+++ b/apps/site/src/content/design-system/components/autocomplete/design/dos-and-don-ts/content.mdoc
@@ -0,0 +1,2 @@
+- Do use the Autocomplete field in scenarios where the user will already know the option they need to search for and select, e.g., their address or&nbsp;a country, etc. &nbsp;
+- Avoid using Autocomplete if the user needs to see the entire list of options before they can select, e.g., a list of Product specific options.&nbsp;
diff --git a/apps/site/src/content/design-system/components/autocomplete/design/sizes/content.mdoc b/apps/site/src/content/design-system/components/autocomplete/design/sizes/content.mdoc
new file mode 100644
index 000000000..0ec354457
--- /dev/null
+++ b/apps/site/src/content/design-system/components/autocomplete/design/sizes/content.mdoc
@@ -0,0 +1,41 @@
+Autocomplete fields come in four different sizes (heights), which align to the regular text inputs within the Design system. Ensure when you are designing forms that you alway use the same size across element types.
+
+```jsx
+
+       <div>     <Autocomplete label="Small example" size="small" className="mb-4">
+              <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+              <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+              <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+              <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+              <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+              <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+            </Autocomplete>
+           
+ <Autocomplete label="Medium example" size="medium" className="mb-4">
+              <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+              <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+              <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+              <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+              <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+              <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+            </Autocomplete>
+
+ <Autocomplete label="Large example" size="large" className="mb-4">
+              <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+              <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+              <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+              <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+              <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+              <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+            </Autocomplete>
+
+ <Autocomplete label="X-Large example" size="xlarge">
+              <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+              <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+              <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+              <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+              <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+              <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+            </Autocomplete>
+</div>
+```
diff --git a/apps/site/src/content/design-system/components/autocomplete/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/autocomplete/design/user-experience/content.mdoc
new file mode 100644
index 000000000..4f2668335
--- /dev/null
+++ b/apps/site/src/content/design-system/components/autocomplete/design/user-experience/content.mdoc
@@ -0,0 +1,3 @@
+Using an Autocomplete field can streamline and accelerate the process of inputting information. As the user starts typing, a filtered list of options appears, based on the characters they have entered. It can be very useful in scenarios where the list of possible options is very long, and the user already knows the answer they are looking for. When used correctly, this component helps make selections more efficiently, reduces typos and generally improves the user experience.&nbsp;
+
+We suggest using the word *Search* somewhere in the hint text label, this, along with the Search icon, this sets the expectation of search-oriented functionality rather than a simple text input.
diff --git a/apps/site/src/content/design-system/components/autocomplete/design/visual-design/content.mdoc b/apps/site/src/content/design-system/components/autocomplete/design/visual-design/content.mdoc
new file mode 100644
index 000000000..796beddf4
--- /dev/null
+++ b/apps/site/src/content/design-system/components/autocomplete/design/visual-design/content.mdoc
@@ -0,0 +1 @@
+As with most components in the GUI the Autocomplete is designed to be simple, unobtrusive and accessible.&nbsp;The addition of the Search icon, provides the affordance to the user that there is a search functionality as opposed to a straight input.
diff --git a/apps/site/src/content/design-system/components/autocomplete/index.yaml b/apps/site/src/content/design-system/components/autocomplete/index.yaml
index 0222c25ad..ead8bf3ea 100644
--- a/apps/site/src/content/design-system/components/autocomplete/index.yaml
+++ b/apps/site/src/content/design-system/components/autocomplete/index.yaml
@@ -1,5 +1,41 @@
-name: Autocompletes
+name: Autocomplete
+description: >-
+  Autocomplete predicts and suggests possible inputs as users type, speeding up
+  the input process and enhancing the user experience. 
+namedExport:
+  discriminant: false
+design:
+  - title:
+      name: Autocomplete
+      slug: autocomplete
+    noTitle: false
+  - title:
+      name: Sizes
+      slug: sizes
+    noTitle: false
+  - title:
+      name: User experience
+      slug: user-experience
+    noTitle: false
+  - title:
+      name: Visual design
+      slug: visual-design
+    noTitle: false
+  - title:
+      name: Dos and don'ts
+      slug: dos-and-don-ts
+    noTitle: false
+accessibility:
+  - title:
+      name: Notes on accessibility
+      slug: notes-on-accessibility
+relatedComponents:
+  - title: Icons
+    slug: /design-system/foundation/icon
+  - title: Text input
+    slug: /design-system/components/input
 code:
   - title:
       name: Development examples
-      slug: development-examples
\ No newline at end of file
+      slug: development-examples
+    noTitle: false
diff --git a/apps/site/src/content/design-system/components/autocomplete/relatedArticles.mdoc b/apps/site/src/content/design-system/components/autocomplete/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/components/progress-bar/accessibility/accessibility-api/content.mdoc b/apps/site/src/content/design-system/components/progress-bar/accessibility/accessibility-api/content.mdoc
index f498cf025..cbe9f9909 100644
--- a/apps/site/src/content/design-system/components/progress-bar/accessibility/accessibility-api/content.mdoc
+++ b/apps/site/src/content/design-system/components/progress-bar/accessibility/accessibility-api/content.mdoc
@@ -1 +1 @@
-- `<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0% complete" aria-live="polite">`: Provides a progress bar with aria attributes to indicate the actual progress value. The _aria-live_ attribute informs assistive technologies the region receives updates that are important for the user to receive, but not so rapid as to be annoying. \[React component: refer to _value_ prop\]
+- `<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0% complete" aria-live="polite">`: Provides a progress bar with aria attributes to indicate the actual progress value. The *aria-live* attribute informs assistive technologies the region receives updates that are important for the user to receive, but not so rapid as to be annoying. [React component: refer to *value* prop]
diff --git a/apps/site/src/content/design-system/components/progress-bar/accessibility/accessibility-features/content.mdoc b/apps/site/src/content/design-system/components/progress-bar/accessibility/accessibility-features/content.mdoc
index ccb7015cb..23af3241c 100644
--- a/apps/site/src/content/design-system/components/progress-bar/accessibility/accessibility-features/content.mdoc
+++ b/apps/site/src/content/design-system/components/progress-bar/accessibility/accessibility-features/content.mdoc
@@ -1,4 +1,4 @@
-- A `<div>` element with “progressbar” _role_ identifies an element that displays the progress status for a task that take a long time or consists of several steps. Various aria attributes provide min, max and current values.
+- A `<div>` element with “progressbar” *role* identifies an element that displays the progress status for a task that take a long time or consists of several steps. Various aria attributes provide min, max and current values.
 - The progress bar is configured to provide an indication of task or action completion in percentage units, announced as “x% complete”
 - Displaying the current value is optional; it can be visually hidden if required, but always provided to screen readers through aria value attributes
 - The progress bar shape and is visible in Windows High Contrast Mode (WHCM). The indicator bar is additionally rendered using a transparent CSS border to ensure visibility in WHCM.
diff --git a/apps/site/src/content/design-system/components/progress-bar/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/progress-bar/code/development-examples/content.mdoc
index d6fb80786..f3c124aa8 100644
--- a/apps/site/src/content/design-system/components/progress-bar/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/progress-bar/code/development-examples/content.mdoc
@@ -1,4 +1,4 @@
-## Progress Bar
+### Progress Bar
 
 ```jsx
 () => {
diff --git a/apps/site/src/content/design-system/components/progress-bar/index.yaml b/apps/site/src/content/design-system/components/progress-bar/index.yaml
index 417d0c8f7..e7c93ea78 100644
--- a/apps/site/src/content/design-system/components/progress-bar/index.yaml
+++ b/apps/site/src/content/design-system/components/progress-bar/index.yaml
@@ -3,19 +3,25 @@ description: >-
   Progress bars are animated bars which show a rate of completion for a system
   task or a response to user input. They can be accompanied by a percentage of
   completion value.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Progress bar
       slug: progress-bar
+    noTitle: false
   - title:
       name: User experience
       slug: user-experience
+    noTitle: false
   - title:
       name: Visual design
       slug: visual-design
+    noTitle: false
   - title:
       name: Dos and don’ts
       slug: dos-and-donts
+    noTitle: false
 accessibility:
   - title:
       name: Notes on accessibility
@@ -29,7 +35,9 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents: []
 code:
   - title:
       name: Development examples
-      slug: development-examples
\ No newline at end of file
+      slug: development-examples
+    noTitle: false
diff --git a/apps/site/src/content/design-system/components/progress-bar/relatedArticles.mdoc b/apps/site/src/content/design-system/components/progress-bar/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/components/progress-rope/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/progress-rope/code/development-examples/content.mdoc
index a5db4b513..7a7b1d7d6 100644
--- a/apps/site/src/content/design-system/components/progress-rope/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/progress-rope/code/development-examples/content.mdoc
@@ -1,5 +1,3 @@
-## Progress Rope
-
 ### Default usage
 
 ```tsx
diff --git a/apps/site/src/content/design-system/content/guidelines/abbreviation/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/abbreviation/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/abbreviation/design/abbreviations/content.mdoc b/apps/site/src/content/design-system/content/guidelines/abbreviation/design/abbreviations/content.mdoc
new file mode 100644
index 000000000..96750f556
--- /dev/null
+++ b/apps/site/src/content/design-system/content/guidelines/abbreviation/design/abbreviations/content.mdoc
@@ -0,0 +1,39 @@
+Use abbreviations when they're well known and appropriate to use.
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">8am, 5pm</p>
+<p className="typography-body-10 ml-4">Min., max.</p>
+</div>
+```
+
+---
+
+For these abbreviations, use a comma beforehand:
+
+- etc. - 'more of the same'
+- i.e. - 'in other words'
+- e.g. - ‘for example’
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">We service a range of industries, e.g. health, education, agriculture, etc.</p>
+</div>
+```
+
+---
+
+Use lower case for numerical abbreviations.
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  mb-2 ml-3">10kg, 10m, $10m</p>
+<p className="typography-body-10 text-muted italic  mb-3">Note: Don’t use plurals or space between the number and the abbreviation.</p>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> 10kg</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> 10kgs, 10 kg</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/abbreviation/design/title/content.mdoc b/apps/site/src/content/design-system/content/guidelines/abbreviation/design/title/content.mdoc
deleted file mode 100644
index fbad1a999..000000000
--- a/apps/site/src/content/design-system/content/guidelines/abbreviation/design/title/content.mdoc
+++ /dev/null
@@ -1,35 +0,0 @@
-Use abbreviations when they're well known and appropriate to use.
-
-For example:
-
-> 8am, 5pm
->
-> Min., max.
-
----
-
-For these abbreviations, use a comma beforehand:
-
-- etc. - 'more of the same'
-- i.e. - 'in other words'
-- e.g. - ‘for example’
-
-For example:
-
-> We service a range of industries, e.g. health, education, agriculture, etc.
-
----
-
-Use lower case for numerical abbreviations.
-
-For example:
-
-> 10kg, 10m, $10m
-
-_Note: Don’t use plurals or space between the number and the abbreviation._
-
-For example:
-
-> Do: 10kg
->
-> Don’t: 10kgs, 10 kg
diff --git a/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml b/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml
index 1a02746f9..8fd9742d6 100644
--- a/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml
@@ -1,8 +1,12 @@
 name: Abbreviations
 description: Abbreviations are shortened forms of words or phrases.
+namedExport:
+  discriminant: false
 design:
   - title:
-      name: title
-      slug: title
+      name: Abbreviations
+      slug: abbreviations
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/abbreviation/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/abbreviation/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/acronym/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/acronym/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/acronym/design/acronyms/content.mdoc b/apps/site/src/content/design-system/content/guidelines/acronym/design/acronyms/content.mdoc
index 02cd3e365..77adc2595 100644
--- a/apps/site/src/content/design-system/content/guidelines/acronym/design/acronyms/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/acronym/design/acronyms/content.mdoc
@@ -1,27 +1,33 @@
 Before using most acronyms, the first mention should spell them out followed by the initials in rounded brackets – thereafter, just use the acronym.
 
-For example:
-
-> You can update your Tax File Number (TFN) at the Australian Tax Office (ATO). Once you’ve updated your TFN, let us know.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">You can update your Tax File Number (TFN) at the Australian Tax Office (ATO). Once you’ve updated your TFN, let us know.</p>
+</div>
+```
 
 ---
 
 For well-known acronyms, you don’t need to spell out them out.
 
-For example:
-
-> ATM, PIN, BSB, SMS, PDF, URL
->
-> NSW, Qld, SA, Vic, ACT, NT, WA, Tas
-
-_Note: Don’t use full stops between letters._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-6 ml-4">ATM, PIN, BSB, SMS, PDF, URL</p>
+<p className="typography-body-10 mb-6 ml-4">NSW, Qld, SA, Vic, ACT, NT, WA, Tas</p>
+<p className="typography-body-10 text-muted italic">Note: Don’t use full stops between letters.</p>
+</div>
+```
 
 ---
 
 Don’t use acronyms for product categories.
 
-For example:
-
-> Do: credit card, home loan
->
-> Don’t: CC, HL
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> credit card, home loan</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> CC, HL</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml b/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml
index 5f5de98f4..c97d5c460 100644
--- a/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml
@@ -1,8 +1,12 @@
 name: Acronyms
 description: Acronyms are words that are formed from the first letters of other words.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Acronyms
       slug: acronyms
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/acronym/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/acronym/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/age-school-year/design/age-school-years/content.mdoc b/apps/site/src/content/design-system/content/guidelines/age-school-year/design/age-school-years/content.mdoc
index b94474832..2a2f31dc6 100644
--- a/apps/site/src/content/design-system/content/guidelines/age-school-year/design/age-school-years/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/age-school-year/design/age-school-years/content.mdoc
@@ -1,29 +1,34 @@
 Use numerals, not words.
 
-For example:
-
-> Do: 18
->
-> Don’t: eighteen
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> 18</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> eighteen</p>
+</div>
+```
 
 ---
 
 For individuals, use ‘years old’ or ‘year old’, depending on the context. For groups, use ‘year olds’.
 
-For example:
-
-> If you’re under 30 years old…
->
-> We asked an 18 year old…
->
-> We asked a group of 18 year olds…
-
-_Note: Don’t use hyphens._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">If you’re under 30 years old…</p>
+<p className="typography-body-10 mb-2 ml-4">We asked an 18 year old…</p>
+<p className="typography-body-10 mb-6 ml-4">We asked a group of 18 year olds…</p>
+<p className="typography-body-10 text-muted italic">Note: Don’t use hyphens.</p>
+</div>
+```
 
 ---
 
 For school years, capitalise the ‘Y’
 
-For example:
-
-> Year 12 students
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Year 12 students</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml b/apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml
index c70646001..1fc2409e1 100644
--- a/apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml
@@ -1,5 +1,7 @@
 name: Age & school years
 description: A guide to writing age and school years.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Age and school years
@@ -7,3 +9,4 @@ design:
     noTitle: true
 accessibility: []
 relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/age-school-year/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/age-school-year/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/bolding-and-underlining/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/bolding-and-underlining/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/bolding-and-underlining/design/bolding-underlining/content.mdoc b/apps/site/src/content/design-system/content/guidelines/bolding-and-underlining/design/bolding-underlining/content.mdoc
new file mode 100644
index 000000000..76d78c54f
--- /dev/null
+++ b/apps/site/src/content/design-system/content/guidelines/bolding-and-underlining/design/bolding-underlining/content.mdoc
@@ -0,0 +1,19 @@
+Don't underline or bold text for emphasis.
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> Lock in exchange rates on up to five major currencies.</p>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-danger font-bold">Don't:</span> Lock in exchange rates on up to <span className="font-bold">five major currencies.</span></p>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-danger font-bold">Don't:</span> Lock in exchange rates on up to <i>five major currencies.</i></p>
+</div>
+```
+
+For steps, use bold text for the exact wording on tabs, links and buttons. Also see [Calls to action (CTAs).](/design-system/content/guidelines/calls-to-action-ctas)
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Sign into the Westpac App > Go to the <b>$</b> on the bottom menu > Tap <b>Pay someone</b> > Tap <b>Add</b></p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/bolding-underlining/index.yaml b/apps/site/src/content/design-system/content/guidelines/bolding-and-underlining/index.yaml
similarity index 80%
rename from apps/site/src/content/design-system/content/guidelines/bolding-underlining/index.yaml
rename to apps/site/src/content/design-system/content/guidelines/bolding-and-underlining/index.yaml
index 5f8203968..d465f3764 100644
--- a/apps/site/src/content/design-system/content/guidelines/bolding-underlining/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/bolding-and-underlining/index.yaml
@@ -2,9 +2,13 @@ name: Bolding & underlining
 description: >-
   Bolding and underlining are used to emphasise words. We only use bolding in
   certain situations.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Bolding and underlining
       slug: bolding-underlining
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/bolding-and-underlining/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/bolding-and-underlining/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/bolding-underlining/design/bolding-underlining/content.mdoc b/apps/site/src/content/design-system/content/guidelines/bolding-underlining/design/bolding-underlining/content.mdoc
deleted file mode 100644
index af63ca04e..000000000
--- a/apps/site/src/content/design-system/content/guidelines/bolding-underlining/design/bolding-underlining/content.mdoc
+++ /dev/null
@@ -1,15 +0,0 @@
-Don't underline or bold text for emphasis.
-
-For example:
-
-> Do: Lock in exchange rates on up to five major currencies.
->
-> Don’t: Lock in exchange rates on up to five major currencies.
->
-> Don’t: Lock in exchange rates on up to **five major currencies.**
-
-For steps, use bold text for the exact wording on tabs, links and buttons. Also see [Calls to action (CTAs).](/design-system/content/calls-to-action)
-
-For example:
-
-> Sign into the Westpac App > Go to the **$** on the bottom menu > Tap **Pay someone** > Tap **Add**
diff --git a/apps/site/src/content/design-system/content/guidelines/bracket/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/bracket/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/bracket/design/brackets/content.mdoc b/apps/site/src/content/design-system/content/guidelines/bracket/design/brackets/content.mdoc
index d7792749d..90e5c27f7 100644
--- a/apps/site/src/content/design-system/content/guidelines/bracket/design/brackets/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/bracket/design/brackets/content.mdoc
@@ -1,13 +1,19 @@
 Use normal punctuation in brackets.
 
-For example:
-
-> Set up direct debit payments for regular bills (e.g. phone, water and electricity), to stay on top of your finances.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Set up direct debit payments for regular bills (e.g. phone, water and electricity), to stay on top of your finances.</p>
+</div>
+```
 
 ---
 
 Ensure the sentence still makes sense with the bracketed copy removed.
 
-For example:
-
-> Set up direct debit payments for regular bills, to stay on top of your finances.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Set up direct debit payments for regular bills, to stay on top of your finances.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml b/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml
index e1b605036..f20c420e1 100644
--- a/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml
@@ -1,8 +1,12 @@
 name: Brackets
 description: Brackets are used to provide extra information.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Brackets
       slug: brackets
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/bracket/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/bracket/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/design/bullet-points-numbered-lists/content.mdoc b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/design/bullet-points-numbered-lists/content.mdoc
index 05122e241..aff46a336 100644
--- a/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/design/bullet-points-numbered-lists/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/design/bullet-points-numbered-lists/content.mdoc
@@ -4,16 +4,19 @@ Use bullet points for listing, e.g., features and benefits.
 
 Don’t punctuate single words or short phrases.
 
-For example:
-
-> Enjoy the benefits of eStatements:
->
-> - More secure
-> - Environmentally friendly
-> - Avoids clutter
-> - Convenient
-
----
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10">Enjoy the benefits of eStatements:</p>
+  <List className="list-disc">
+    <List.Item className="typography-body-10">More secure</List.Item>
+    <List.Item className="typography-body-10">Environmentally friendly
+    </List.Item>
+    <List.Item className="typography-body-10">Clutter free</List.Item>
+    <List.Item className="typography-body-10">Convenient</List.Item>
+  </List>
+</div>
+```
 
 Two or more sentences in any position should be fully punctuated but avoid writing in this way as it loses the impact of using bullet points.
 
@@ -21,8 +24,12 @@ Two or more sentences in any position should be fully punctuated but avoid writi
 
 Use numbered lists for sequential steps, e.g., instructions. Also see [Calls to action (CTAs)](/design-system/content/guidelines/calls-to-action-ctas).
 
-For example:
-
-> 1.  Sign into the Westpac App
-> 2.  Go to **Settings**
-> 3.  Select **Wallpaper**
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>  <List type="ordered">
+<List.Item className="typography-body-10">Sign into the Westpac App</List.Item>
+<List.Item className="typography-body-10">Go to <b>Settings</b>    </List.Item>
+<List.Item className="typography-body-10">Select <b>Wallpaper</b></List.Item>
+</List>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/index.yaml b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/index.yaml
index 389aca762..7c14a4098 100644
--- a/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/index.yaml
@@ -2,9 +2,13 @@ name: Bullet points & numbered lists
 description: >-
   Bullet points and numbered lists are used to make it easier to understand a
   series of items.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Bullet points and numbered lists
       slug: bullet-points-numbered-lists
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc b/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc
index c3b0e930a..fe79b629a 100644
--- a/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc
@@ -2,65 +2,76 @@ CTAs should be short and action-orientated – using buttons and hyperlinked tex
 
 For example:
 
-![Two examples of calls to action that are short and action oriented.](https://res.cloudinary.com/westpac-gel/image/upload/v1667894142/cla7x3vj6001ef58icgubfckf.png)
+Missing image https://res.cloudinary.com/westpac-gel/image/upload/v1667894142/cla7x3vj6001ef58icgubfckf.png
 
 {% imageCaption text="Use short, action oriented calls to action" /%}
 
-_Note: No full stops in CTAs but fine to use question marks._
+*Note: No full stops in CTAs but fine to use question marks.*
 
 ---
 
 Hyperlinks must be underlined unless they’re standalone text links, in which case we add a chevron.
 
-For example:
-
-> \> Register for Online Banking
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+  <Link href="#" iconBefore={ArrowRightIcon}>
+    Register for Online Banking
+  </Link>
+</div>
+```
 
 Instead of using generic CTAs such as ‘Find out more’ and ‘Learn more’ – try to be contextual for accessibility and best practice (SEO & UX).
 
 However, when space is limited, try CTAs such as ‘Tell me more’ or ‘Show me how’ instead of ‘Find out more’ and ‘Learn more’.
 
-For example:
-
-> Find out more about balance transfers
->
-> To learn more about whether Online Banking is right for you, see our Online Banking Terms & Conditions for more information.
-
-> Do: Submit application
->
-> Don’t: Finish
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  mb-2 ml-3">Find out more about balance transfers</p>
+<p className="typography-body-10  mb-6 ml-3">To learn more about whether Online Banking is right for you, see our Online Banking Terms & Conditions for more information.</p>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> Submit application</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> Finish</p>
+</div>
+```
 
 ---
 
 Try to avoid overt navigation instructions, e.g. ‘Click the link below to start the survey’ or ‘call the number below’
 
-For example:
-
-> Use a CTA button or hyperlink that says ‘Start survey now’
->
-> Call us on 13 20 32
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  mb-2 ml-3">Use a CTA button or hyperlink that says <Link href="#" type="inline">Start survey now</Link></p>
+<p className="typography-body-10  mb-2 ml-3">Call us on <Link href="#" type="inline">13 20 32</Link></p>
+</div>
+```
 
 ---
 
 Keep verbs appropriate to the device type.
 
-For example:
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-3 ml-4"><span className=" font-bold">Mobile:</span> Go to, tap, swipe, scroll, select, choose</p>
+<p className="typography-body-10 mb-3 ml-4"><span className=" font-bold">Desktop:</span> Go to, select, scroll, choose</p>
+<p className="typography-body-10 mb-3 ml-4"><span className=" font-bold">Cross-device:</span> Go to, select, scroll, choose</p>
+<p className="typography-body-10 text-muted mb-3 italic">Note: ‘Click’ doesn’t adhere to the <Link href="https://www.w3.org/WAI/tips/writing/" type="inline">Accessibility & Inclusion Guidelines</Link>.</p>
 
-> **Mobile:** Go to, tap, swipe, scroll, select, choose
->
-> **Desktop:** Go to, select, scroll, choose
->
-> **Cross-device:** Go to, select, scroll, choose
-
-_Note: ‘Click’ doesn’t adhere to the_ [\_Accessibility & Inclusion Guidelines\_](https://www.w3.org/WAI/tips/writing/)_._
+</div>
+```
 
 ---
 
 When referring to signing into Online Banking or the Westpac App, use ‘into’, not ‘in to’.
 
-For example:
-
-> Sign into Online Banking or the Westpac App
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Sign into Online Banking or the Westpac App</p>
+</div>
+```
 
 ---
 
@@ -68,15 +79,25 @@ For steps, use bold text for the exact wording on tabs, links and buttons.
 
 For steps in body copy, use chevrons. Capitalise the first word after the chevron.
 
-For example:
-
-> Sign into the Westpac App > Go to the **$** on the bottom menu > Tap **Pay someone** > Tap **Add**.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Sign into the Westpac App > Go to the <b>$</b> on the bottom menu > Tap <b>Pay someone</b> > Tap <b>Add</b></p>
+</div>
+```
 
 ---
 
 If there are more than 5 steps, switch to the list format. Also see [Bullet points & numbered lists](/design-system/content/guidelines/bullet-points-numbered-list).
 
-For example:
-
-> - Sign into the Westpac App
-> - Go to **Settings** and select **Wallpaper**
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+  <List className="list-disc">
+    <List.Item className="typography-body-10">Sign into the Westpac App</List.Item>
+    <List.Item className="typography-body-10">
+      Go to <b>Settings</b> and select <b>Wallpaper</b>
+    </List.Item>
+  </List>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/index.yaml b/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/index.yaml
index 0cb424491..f649a9130 100644
--- a/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/index.yaml
@@ -1,8 +1,12 @@
 name: Calls to action (CTAs)
 description: Calls to action are used to get a person to perform an instruction.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Calls to action
       slug: calls-to-action
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc
index 90b8f7b51..00b374bdf 100644
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc
@@ -1,65 +1,93 @@
 Always use capitalisation for:
 
-- Branded names (but not generic names of products or services)
-
-For example:
-
-> Westpac Life savings account
->
-> Altitude Platinum credit card
-
-- Page meta titles (for SEO)
-
-For example:
-
-> Personal | Bank Accounts
-
-- Guides
-
-For example:
-
-> First Home Buyers Guide
-
-- Holidays - see [People & Diversity](/design-system/content/people-diversity) for more.
-
-For example:
-
-> Christmas, Easter, Lunar New Year
-
-- Days and months
-
-For example:
-
-> Monday, Friday
->
-> January, December
-
-- Geographical names
-
-For example:
-
-> Sydney, Australia
-
-- Languages
-
-For example:
-
-> English, Cantonese, Vietnamese
-
-- Government departments
-
-For example:
-
-> Australian Taxation Office
-
-- Job titles (official titles only)
-
-For example:
-
-> Get in touch with your Relationship Manager
-
-- Awards
-
-For example:
-
-> Best Business Bank Award 2021
+Branded names (but not generic names of products or services)
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">Westpac Life savings account</p>
+<p className="typography-body-10 ml-4">Altitude Platinum credit card</p>
+</div>
+```
+
+Page meta titles (for SEO)
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Personal | Bank Accounts</p>
+</div>
+```
+
+Guides
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">First Home Buyers Guide</p>
+</div>
+```
+
+Holidays - see [People & Diversity](/design-system/content/people-diversity) for more.
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Christmas, Easter, Lunar New Year</p>
+</div>
+```
+
+Days and months
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">Monday, Friday</p>
+<p className="typography-body-10 ml-4">January, December</p>
+</div>
+```
+
+Geographical names
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Sydney, Australia</p>
+</div>
+```
+
+Languages
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">English, Cantonese, Vietnamese</p>
+</div>
+```
+
+Government departments
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Australian Taxation Office</p>
+</div>
+```
+
+Job titles (official titles only)
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Get in touch with your Relationship Manager</p>
+</div>
+```
+
+Awards
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Best Business Bank Award 2021</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/countries/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/countries/content.mdoc
index 4d10e88b6..faeee33b0 100644
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/countries/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/countries/content.mdoc
@@ -1,19 +1,17 @@
 Take note of the way we refer to certain countries.
 
-China – use China, not PRC
+- China – use China, not PRC
+- United Kingdom - use UK or United Kingdom, not England or Great Britain
+- United States - use US or United States, not USA, America or United States of America.
 
-United Kingdom - use UK or United Kingdom, not England or Great Britain
+*Note: For H1 headings, US reads as ‘us’, so use U.S.*
 
-United States - use US or United States, not USA, America or United States of America.
-
-_Note: For H1 headings, US reads as ‘us’, so use U.S._
-
-For example:
-
-> China trade deal
->
-> UK stock market recovery
->
-> US stocks hit a slump
->
-> INVEST IN U.S. STOCKS
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">China trade deal</p>
+<p className="typography-body-10 mb-2 ml-4">UK stock market recovery</p>
+<p className="typography-body-10 mb-2 ml-4">US stocks hit a slump</p>
+<p className="typography-body-10 ml-4">INVEST IN U.S. STOCKS</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc
index ba8f15387..6eb1ef55d 100644
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc
@@ -1,9 +1,11 @@
 Headings always use sentence-case (not title-case), excluding H1 page headings which are all-caps.
 
-For example:
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> Get $3k cashback when you refinance to us</p>
+<p className="typography-body-10 mb-3 ml-4"><span className="text-danger font-bold">Don't:</span> Get $3K Cashback When You Refinance To Us</p>
+<p className="typography-body-10 text-muted mb-3 italic">Note: No full stops on the end of any headings – see <Link href="/design-system/content/guidelines/headings-subheading" type="inline">Headings and subheadings</Link>.</p>
 
-> Do: Get $3k cashback when you refinance to us
->
-> Don’t: Get $3K Cashback When You Refinance To Us
-
-_Note: No full stops on the end of any headings – see_ [_Headings and subheadings_](/design-system/content/headings-subheadings)_._
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/lower-case/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/lower-case/content.mdoc
index 7ff153ca0..a69acf818 100644
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/lower-case/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/lower-case/content.mdoc
@@ -1,21 +1,30 @@
 Always use lower-case for:
 
-- Seasons
-
-For example:
-
-> spring, summer, autumn, winter
-
-- Online terms
-
-For example:
-
-> email, homepage, internet
-
-_Note: Capitalisation rules do not apply when a formal name is written in lower or upper case._
-
-For example:
-
-> Maria von Trapp, iPhone, ebay
->
-> BPAY, PayID
+Seasons
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">spring, summer, autumn, winter</p>
+</div>
+```
+
+Online terms
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">email, homepage, internet</p>
+
+</div>
+```
+
+Capitalisation rules do not apply when a formal name is written in lower or upper case.
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">Maria von Trapp, iPhone, ebay</p>
+<p className="typography-body-10 ml-4">BPAY, PayID</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/sentence-case/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/sentence-case/content.mdoc
index a0f0e7b9b..4958b0038 100644
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/sentence-case/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/sentence-case/content.mdoc
@@ -1,41 +1,69 @@
 Always use sentence-case for:
 
-- Navigation menus (unless linking a branded product).
-
-For example:
-
-> \> Savings account
-
-> \> Westpac Life
-
-- CTA buttons and hyperlinks (no full stops but fine to use question marks)
-
-For example:
-
-> Compare accounts
->
-> What’s new?
-
-> \> Calculate my repayments
-
-> \> How much can I borrow?
-
-- Validation or error messages
-
-For example:
-
-> Enter a valid email address
-
-- Form fields
-
-For example:
-
-> First name, Phone number, Email
-
-- Numerical amounts
-
-For example:
-
-> Do: $10k
->
-> Don’t: $10K
+Navigation menus (unless linking a branded product).
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+  <p><Link href="#" iconBefore={ArrowRightIcon}>
+    Savings account
+  </Link></p>
+  <p><Link href="#" iconBefore={ArrowRightIcon}>
+    Westpac Life
+  </Link></p>
+</div>
+```
+
+CTA buttons and hyperlinks (no full stops but fine to use question marks)
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  mb-4 ml-3"><Button>
+  Compare accounts
+</Button></p>
+<p className="typography-body-10  mb-4 ml-3"><Link href="#" type="inline">What's new?</Link></p>
+  <p><Link href="#" iconBefore={ArrowRightIcon}>
+    Calculate my repayments
+  </Link></p>
+  <p><Link href="#" iconBefore={ArrowRightIcon}>
+    How much can I borrow?
+  </Link></p>
+</div>
+```
+
+Validation or error messages
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4"><Alert look="danger" mode="text">Enter a valid email address.</Alert></p>
+</div>
+```
+
+Form fields
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<InputField label="First name">
+        <Input />
+      </InputField>
+<InputField label="Phone number">
+        <Input />
+      </InputField>
+<InputField label="Email">
+        <Input />
+      </InputField>
+</div>
+```
+
+Numerical amounts
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> $10k</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> $10K</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/states-and-territories/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/states-and-territories/content.mdoc
index b6e0be46e..b9eeed03c 100644
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/states-and-territories/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/states-and-territories/content.mdoc
@@ -1,21 +1,16 @@
 States and territories have each word capitalised.
 
-For example:
-
-> Australian Capital Territory (ACT)
->
-> New South Wales (NSW)
->
-> Victoria (Vic)
->
-> Queensland (Qld)
->
-> Western Australia (WA)
->
-> South Australia (SA)
->
-> Tasmania (Tas)
->
-> Northern Territory (NT)
-
-_Note: Don’t use all-caps for Vic, Qld, Tas as they are the shortened versions of each full name of the state, rather than each letter representing a word, e.g., NSW stands for New South Wales._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">Australian Capital Territory (ACT)</p>
+<p className="typography-body-10 mb-2 ml-4">New South Wales (NSW)</p>
+<p className="typography-body-10 mb-2 ml-4">Victoria (Vic)</p>
+<p className="typography-body-10 mb-2 ml-4">Queensland (Qld)</p>
+<p className="typography-body-10 mb-2 ml-4">Western Australia (WA)</p>
+<p className="typography-body-10 mb-2 ml-4">South Australia (SA)</p>
+<p className="typography-body-10 mb-2 ml-4">Tasmania (Tas)</p>
+<p className="typography-body-10 mb-6 ml-4">Northern Territory (NT)</p>
+<p className="typography-body-10 text-muted italic">Note: Don’t use all-caps for Vic, Qld, Tas as they are the shortened versions of each full name of the state, rather than each letter representing a word, e.g., NSW stands for New South Wales.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml b/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml
index 700c37b54..adfe00e74 100644
--- a/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml
@@ -2,23 +2,33 @@ name: Capital letters
 description: >-
   Capital letters are typically used at the start of a sentence and for proper
   nouns.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Headings
       slug: headings
+    noTitle: false
   - title:
       name: Sentence-case
       slug: sentence-case
+    noTitle: false
   - title:
       name: Capitalisation
       slug: capitalisation
+    noTitle: false
   - title:
       name: Lower-case
       slug: lower-case
+    noTitle: false
   - title:
       name: States and territories
       slug: states-and-territories
+    noTitle: false
   - title:
       name: Countries
       slug: countries
+    noTitle: false
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/contraction/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/contraction/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/contraction/design/contractions/content.mdoc b/apps/site/src/content/design-system/content/guidelines/contraction/design/contractions/content.mdoc
index 372d0652f..f5f3466fe 100644
--- a/apps/site/src/content/design-system/content/guidelines/contraction/design/contractions/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/contraction/design/contractions/content.mdoc
@@ -1,17 +1,21 @@
 Our writing style is conversational, so use contractions wherever possible.
 
-For example:
-
-> Do: You’ll, you’re, don’t, aren’t
->
-> Don’t: You will, you are, do not, are not
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> You’ll, you’re, don’t, aren’t</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> You will, you are, do not, are not</p>
+</div>
+```
 
 ---
 
 Don’t use unnatural sounding contractions.
 
-For example:
-
-> Don’t: May’ve, wouldn’t’ve, where’d
-
-_Note: There are instances where contractions cannot be used for legal reasons._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-3 ml-4"><span className="text-danger font-bold">Don't:</span> May’ve, wouldn’t’ve, where’d</p>
+<p className="typography-body-10 text-muted mb-3 italic">Note: There are instances where contractions cannot be used for legal reasons.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml b/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml
index 22354ab20..0bc004b3b 100644
--- a/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml
@@ -1,8 +1,12 @@
 name: Contractions
 description: Contractions consist of two words combined to create a shorter word.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Contractions
       slug: contractions
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/contraction/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/contraction/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/dates-days-time/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/dates-days-time/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/dates-days-time/content.mdoc b/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/dates-days-time/content.mdoc
index 1c1a13cd7..e1a5e4aa5 100644
--- a/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/dates-days-time/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/dates-days-time/content.mdoc
@@ -1,134 +1,151 @@
 Days and months are spelt out in full unless appearing in T&Cs, disclaimers, contact details or mobile apps.
 
-For example:
-
-> Monday, January
->
-> Apply by 1 Jan 2021.
->
-> Mon–Sun
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">Monday, January</p>
+<p className="typography-body-10 mb-2 ml-4">Apply by 1 Jan 2023.</p>
+<p className="typography-body-10 ml-4">Mon–Sun</p>
+</div>
+```
 
 ---
 
 Dates should appear as <Day>, <Date><Month><Year>
 
-For example:
-
-> Monday, 1 January 2021
-
-_Note: For T&Cs and disclaimers, shorten dates as DD/MM/YY or 1 Jan 2021._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-6 ml-4">Monday, 1 January 2021</p>
+<p className="typography-body-10 text-muted italic">Note: For T&Cs and disclaimers, shorten dates as DD/MM/YY or 1 Jan 2021.</p>
+</div>
+```
 
 ---
 
 Don’t use ‘st’, ‘nd’, ‘rd’, ‘th’ on dates.
 
-For example:
-
-> Do: 25 January 2021
->
-> Don’t: 25th January 2021
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> 25 January 2023</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> 25th January 2023</p>
+</div>
+```
 
 ---
 
 No apostrophes on decades – it’s plural, not possessive.
 
-For example:
-
-> 1990s, 90s
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">1990s, 90s</p>
+</div>
+```
 
 ---
 
 For date/day/time ranges, use an em dash with no space on either side.
 
-For example:
-
-> 10–15 January 2021
->
-> 2010–2020
->
-> Mon–Fri
->
-> 8am–8pm
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">10–15 January 2021</p>
+<p className="typography-body-10 mb-2 ml-4">2010–2020</p>
+<p className="typography-body-10 mb-2 ml-4">Mon–Fri</p>
+<p className="typography-body-10 ml-4">8am–8pm</p>
+</div>
+```
 
 ---
 
 For times, use the 12-hour clock and use full stops to separate hours and minutes.
 
-For example:
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> 7am, 8.30am, 5.30pm</p>
+<p className="typography-body-10 mb-3 ml-4"><span className="text-danger font-bold">Don't:</span> 7:00am, 8:30am, 17:30</p>
+<p className="typography-body-10 text-muted mb-6 italic">Note: For 12am and 12pm, use ‘midnight’ and ‘noon’.</p>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">Entries closes before midnight.</p>
+<p className="typography-body-10 ml-4">The event will start at noon.</p>
+</div>
 
-> Do: 8.30am, 5.30pm
->
-> Don’t: 8.00am, 8:00am, 17.30
-
-_Note: For 12am and 12pm, use ‘midnight’ and ‘noon’._
-
-For example:
-
-> Entries closes before midnight.
->
-> The event will start at noon.
+```
 
 ---
 
 If you need to specify the time zone, use the following format:
 
-- Westpac
-
-8.30am-5pm (Sydney time), Mon-Fri
-
-- St George
-
-Mon-Sat, 8am-8pm (AEST)
-
-- Bank of Melbourne
-
-Mon-Sat, 8am-8pm
-
-- BankSA
-
-Mon-Sat, 7.30am-7.30pm
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-2">WESTPAC</h4>
+<p className="typography-body-10 mb-4 ml-4">8.30am-5pm (Sydney time), Mon-Fri</p>
+<h4 className="typography-body-10 text-muted mb-2">ST.GEORGE</h4>
+<p className="typography-body-10 mb-4 ml-4">Mon-Sat, 8am-8pm (AEST)</p>
+<h4 className="typography-body-10 text-muted mb-2">BANK OF MELBOURNE</h4>
+<p className="typography-body-10 mb-4 ml-4">Mon-Sat, 8am-8pm</p>
+<h4 className="typography-body-10 text-muted mb-2">BANKSA</h4>
+<p className="typography-body-10 ml-4">Mon-Sat, 7.30am-7.30pm</p>
+</div>
+```
 
 ---
 
 Use 24/7 – not ‘24 hours, 7 days a week’.
 
-For example:
-
-> Bank online, 24/7
->
-> You can call us anytime, 24/7
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  mb-2 ml-3">Bank online, 24/7</p>
+<p className="typography-body-10 ml-3">You can call us anytime, 24/7</p>
+</div>
+```
 
 ---
 
 When writing for mobile apps, the guidance for dates and times are:
 
-- Date can be qualified as today, yesterday or tomorrow
+Date can be qualified as today, yesterday or tomorrow
 
-For example:
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">today, yesterday, tomorrow</p>
+</div>
+```
 
-> today, yesterday, tomorrow
+Date cannot be qualified as today, yesterday or tomorrow
 
-- Date cannot be qualified as today, yesterday or tomorrow
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Fri 1 Mar 2022</p>
+</div>
+```
 
-For example:
+Date with time
 
-> Fri 1 Mar 2022
-
-- Date with time
-
-For example:
-
-> Fri 1 Mar 2022 11:50pm (Sydney time)
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Fri 1 Mar 2022 11:50pm (Sydney time)</p>
+</div>
+```
 
 ---
 
 Numbers 0 to 9 are generally written as words while numbers 10+ are generally written as numerals.
 
-For example:
-
-> No monthly fees for six months.
->
-> Our lowest rate in 20 years.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  mb-2 ml-3">No monthly fees for six months.</p>
+<p className="typography-body-10 ml-3">Our lowest rate in 20 years.</p>
+</div>
+```
 
 ---
 
@@ -144,26 +161,26 @@ Use numerals instead of words for:
 - snappy copy
 - mobile apps where space is limited.
 
-For example:
-
-> Your new card will arrive within 5 business days
->
-> Children under 5 years old…
->
-> Year 12 students
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">Your new card will arrive within 5 business days</p>
+<p className="typography-body-10 mb-2 ml-4">Children under 5 years old…</p>
+<p className="typography-body-10 ml-4">Year 12 students</p>
+</div>
+```
 
 ---
 
 Avoid starting a headline or sentence with a numeral unless it’s dollar amounts, percentages, points or tips/reasons/steps, etc.
 
-For example:
-
-> $3k cashback when you refinance your home loan to us.
->
-> 1.99% p.a. fixed rate for first home buyers.
->
-> 150,000 Velocity Points could be yours with a Westpac home loan.
->
-> 5 tips for paying off your mortgage faster.
->
-> 3 easy steps to setting up Online Banking.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">$3k cashback when you refinance your home loan to us.</p>
+<p className="typography-body-10 mb-2 ml-4">1.99% p.a. fixed rate for first home buyers.</p>
+<p className="typography-body-10 mb-2 ml-4">150,000 Velocity Points could be yours with a Westpac home loan.</p>
+<p className="typography-body-10 mb-2 ml-4">5 tips for paying off your mortgage faster.</p>
+<p className="typography-body-10 ml-4">3 easy steps to setting up Online Banking.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/dates-days-time/index.yaml b/apps/site/src/content/design-system/content/guidelines/dates-days-time/index.yaml
index 9ff242cb3..75fb4c10e 100644
--- a/apps/site/src/content/design-system/content/guidelines/dates-days-time/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/dates-days-time/index.yaml
@@ -1,8 +1,12 @@
 name: Dates, days & time
 description: A guide to writing dates, days and time.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Dates, days and time
       slug: dates-days-time
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/dates-days-time/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/dates-days-time/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/design/hyperlinks-email-addresses/content.mdoc b/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/design/hyperlinks-email-addresses/content.mdoc
index 8eae6d328..608707d38 100644
--- a/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/design/hyperlinks-email-addresses/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/design/hyperlinks-email-addresses/content.mdoc
@@ -4,38 +4,41 @@ Customers with accessibility requirements may use a screen reader which means th
 - avoid duplicating link text within the same page
 - avoid using full URLs.
 
-_Note: External links should open in a new tab while internal links and PDFs should open in the same tab – exceptions for secure environment._
-
-For example:
-
-> Do: Download our First Home Buyers Guide
->
-> Don’t: Download our First Home Buyers Guide
-
-> Do: For more information, see our Online Banking Terms & Conditions
->
-> Don’t: For more information, see our Online Banking Terms & Conditions
+*Note: External links should open in a new tab while internal links and PDFs should open in the same tab – exceptions for secure environment.*
+
+```jsx
+                             <div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> Download our <Link href="#" type="inline">First Home Buyers Guide</Link></p>
+<p className="typography-body-10 mb-6 ml-4"><span className="text-danger font-bold">Don't:</span> <Link href="#" type="inline">Download</Link> our First Home Buyers Guide</p>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> For more information, see our <Link href="#" type="inline">Online Banking Terms & Conditions</Link></p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> For more information, see our Online Banking <Link href="#" type="inline">Terms & Conditions</Link></p>
+</div>
+```
 
 ---
 
 Never use ‘click here' – and avoid generic CTAs such as 'Find out more', ‘Learn more’, etc. – as these don’t meet our Accessibility & Inclusion requirements. Instead, try describing what the link would do.
 
-For example:
-
-> Do: See our range of credit cards
->
-> Don’t: Click here for more information on our range of credit cards
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> See <Link href="#" type="inline">our range of credit cards</Link></p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> <Link href="#" type="inline">Click here</Link> for more information on our range of credit cards</p>
+</div>
+```
 
 ---
 
 Email addresses are lower-case without a full stop.
 
-Westpac URLs don’t include ‘https://’ or ‘www.’ but external websites must include ‘www.’, e.g. www.ato.gov.au
-
-For example:
-
-> johnsmith@westpac.com.au
->
-> westpac.com.au/westpacapp
+Westpac URLs don’t include ‘https://’ or ‘www.’ but external websites must include ‘www.’, e.g. [www.ato.gov.au](#)
 
-_Note: Don’t end a URL with a full stop or forward slash._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">johnsmith@westpac.com.au</p>
+<p className="typography-body-10 mb-6 ml-4">westpac.com.au/westpacapp</p>
+<p className="typography-body-10 text-muted italic">Note: Don’t end a URL with a full stop or forward slash.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/index.yaml b/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/index.yaml
index 307cab70a..495a786b9 100644
--- a/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/index.yaml
@@ -1,8 +1,12 @@
 name: Hyperlinks & email addresses
 description: A guide to using hyperlinks and email addresses.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Hyperlinks and email addresses
       slug: hyperlinks-email-addresses
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/navigation/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/navigation/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/navigation/design/navigation/content.mdoc b/apps/site/src/content/design-system/content/guidelines/navigation/design/navigation/content.mdoc
index 1dc170b71..316da1322 100644
--- a/apps/site/src/content/design-system/content/guidelines/navigation/design/navigation/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/navigation/design/navigation/content.mdoc
@@ -1,27 +1,41 @@
 Navigation and menu items are sentence case unless it’s a branded product.
 
-For example:
-
-> \> Home loans
->
-> \> Savings accounts
->
-> \> Westpac Life
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+ <p className="typography-body-10 mb-2 ml-3"> <Link href="#" iconBefore={ArrowRightIcon}>
+    Home loans
+  </Link></p>
+  <p className="typography-body-10 mb-2 ml-3"><Link href="#" iconBefore={ArrowRightIcon}>
+    Savings accounts
+  </Link></p>
+  <p className="typography-body-10 ml-3"><Link href="#" iconBefore={ArrowRightIcon}>
+    Westpac Life
+  </Link></p>
+</div>
+```
 
 Ampersands can be used to shorten the wording
 
-For example:
-
-> \> International & Travel
->
-> \> Terms & Conditions
-
-_Note: Capitalise the second word_
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+  <p className="typography-body-10  mb-2 ml-3"><Link href="#" iconBefore={ArrowRightIcon}>
+    International & Travel
+  </Link></p>
+  <p className="typography-body-10  mb-6 ml-3"><Link href="#" iconBefore={ArrowRightIcon} mb-6>
+    Terms & Conditions
+  </Link></p>
+<p className="typography-body-10 text-muted italic">Note: Capitalise the second word</p>
+</div>
+```
 
 Refer to the starting screen in the app as ‘home screen’ and not ‘dashboard’ or ‘home dashboard’.
 
-For example:
-
-> **How we calculate your net position**
->
-> We add up the balances of the Westpac accounts that you see on your home screen.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  mb-2 ml-3"><b>How we calculate your net position</b></p>
+<p className="typography-body-10  mb-2 ml-3">We add up the balances of the Westpac accounts that you see on your home screen.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml b/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml
index b60e30f78..e1c5ebb2d 100644
--- a/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml
@@ -1,8 +1,12 @@
 name: Navigation
 description: Navigation is used to help a person find content on a website or app.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Navigation
       slug: navigation
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/navigation/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/navigation/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/numbers-currencies/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/numbers-currencies/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/numbers-currencies/design/numbers-currencies/content.mdoc b/apps/site/src/content/design-system/content/guidelines/numbers-currencies/design/numbers-currencies/content.mdoc
index bcaf60ac3..dbea76d53 100644
--- a/apps/site/src/content/design-system/content/guidelines/numbers-currencies/design/numbers-currencies/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/numbers-currencies/design/numbers-currencies/content.mdoc
@@ -1,14 +1,20 @@
 Numbers 0-9 should be written as words.
 
-For example:
-
-> No fees for six months.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-3">No fees for six months.</p>
+</div>
+```
 
 Numbers 10+ should be written using numbers.
 
-For example:
-
-> Get credit for up to 30 days.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  ml-3">Get credit for up to 30 days.</p>
+</div>
+```
 
 ---
 
@@ -24,23 +30,26 @@ Use numerals instead of words for:
 - snappy copy
 - mobile apps where space is limited.
 
-For example:
-
-> 5 TIPS FOR PAYING OFF YOUR MORTGAGE FASTER.
->
-> 6 WAYS TO SAVE MORE
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-3">5 TIPS FOR PAYING OFF YOUR MORTGAGE FASTER.</p>
+<p className="typography-body-10  ml-3">6 WAYS TO SAVE MORE</p>
+</div>
+```
 
 ---
 
 Avoid starting a sentence or heading with a number unless it’s a rate, dollar amount, points or tips/reasons/steps, etc.
 
-For example:
-
-> $3K CASHBACK WITH A WESTPAC HOME LOAN
->
-> $3,000 cashback.
->
-> Get $3k cashback….
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-3">$3K CASHBACK WITH A WESTPAC HOME LOAN</p>
+<p className="typography-body-10 mb-2 ml-3">$3,000 cashback.</p>
+<p className="typography-body-10  ml-3">Get $3k cashback….</p>
+</div>
+```
 
 ---
 
@@ -50,90 +59,102 @@ Numerals 1,000+ use commas
 
 Thousands, millions and billions can be expressed using k, m, b – and should always be used as such in headings, disclaimers and T&Cs.
 
-For example:
-
-> 5m customers…
->
-> $5b worth of shares…
-
-_Note: For points, it’s preferable to use ‘000s as it looks more impressive._
+```jsx
+            <div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">5m customers…</p>
+<p className="typography-body-10 mb-6 ml-4">$5b worth of shares…</p>
+<p className="typography-body-10 text-muted italic">Note: For points, it’s preferable to use ‘000s as it looks more impressive.</p>
+</div>
+```
 
 ---
 
 BSB numbers include a dash after the first three digits
 
-For example:
-
-> 732-118
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-3">732-118</p>
+</div>
+```
 
 ---
 
 Telephone numbers should include spaces.
 
-For example:
-
-> 6-digit: 132 032
->
-> 10-digit: +61 2 9155 7700
->
-> Mobile: 0439 111 222
-
-_Note: Telephone numbers need to be hyperlinked and underlined for accessibility._
+```jsx
+            <div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">6-digit: 132 032</p>
+<p className="typography-body-10 mb-2 ml-4">10-digit: +61 2 9155 7700</p>
+<p className="typography-body-10 mb-6 ml-4">Mobile: 0439 111 222</p>
+<p className="typography-body-10 text-muted italic">Note: Telephone numbers need to be hyperlinked and underlined for accessibility.</p>
+</div>
+```
 
 ---
 
 Number ranges use an en dash without spaces on either side.
 
-For example:
-
-> 8am–8pm
->
-> 18–34 year olds
->
-> Years 7–12
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-3">8am–8pm</p>
+<p className="typography-body-10 mb-2 ml-3">18–34 year olds</p>
+<p className="typography-body-10  ml-3">Years 7–12</p>
+</div>
+```
 
 ---
 
-Percentages should be %, not ‘percent’.
-
-For example:
-
-> Earn up to 3% p.a. interest
->
-> Get a fixed rate of 1.99% p.a.
+Percentages should be %, not ‘percent’
 
-_Note: No decimal place if a whole number; two decimal places if any decimal applies_
+```jsx
+            <div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">Earn up to 3% p.a. interest</p>
+<p className="typography-body-10 mb-6 ml-4">Get a fixed rate of 1.99% p.a.</p>
+<p className="typography-body-10 text-muted italic">Note: No decimal place if a whole number; two decimal places if any decimal applies.</p>
+</div>
+```
 
 ---
 
 Number rankings can either be:
 
 - ‘first’, ‘second’, etc.
-- #1, #2, #3
+- \#1, #2, #3
 - no.1, no.2
 
-For example:
-
-> Westpac is Australia’s second biggest bank
->
-> Westpac is aiming to be Australia’s #1 mobile banking app.
->
-> Our no.1 business account.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-3">Westpac is Australia’s second biggest bank</p>
+<p className="typography-body-10 mb-2 ml-3">Westpac is aiming to be Australia’s #1 mobile banking app.</p>
+<p className="typography-body-10  ml-3">Our no.1 business account.</p>
+</div>
+```
 
 ---
 
 No currency symbols on abbreviations of foreign currencies, e.g. AUD, USD, NZD, EUR, GB, etc.
 
-For example:
-
-> Do: AUD100,000
->
-> Don’t: AUD$100,000
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> AUD100,000</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> AUD$100,000</p>
+</div>
+```
 
 ---
 
 Currencies are lower case when using the word.
 
-For example:
-
-> euro, dollar, sterling, pound
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-3">euro, dollar, sterling, pound</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/numbers-currencies/index.yaml b/apps/site/src/content/design-system/content/guidelines/numbers-currencies/index.yaml
index 185c285c4..26fab77da 100644
--- a/apps/site/src/content/design-system/content/guidelines/numbers-currencies/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/numbers-currencies/index.yaml
@@ -1,8 +1,12 @@
 name: Numbers & currencies
 description: A guide to writing numbers and currencies.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Numbers and currencies
       slug: numbers-currencies
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/numbers-currencies/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/numbers-currencies/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/people-diversity/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/people-diversity/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc b/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc
index 9d77592c1..584865443 100644
--- a/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc
@@ -1,10 +1,12 @@
 Avoid being gender specific where possible.
 
-For example:
-
-> Do: Tradesperson, Tradie
->
-> Don’t: Tradesman
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> Tradesperson, Tradie</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> Tradesman</p>
+</div>
+```
 
 ---
 
@@ -14,23 +16,26 @@ When referring to First Nations people, use:
 - First people
 - Aboriginal and Torres Strait Islander(s)
 
-For example:
-
-> We offer various career opportunities for Aboriginal and Torres Strait Islanders to help them prosper and grow.
-
-_Note: Don’t use ‘Indigenous’ as it can be considered offensive; but it may be used when referring to programs or business names and units._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-3 ml-4">We offer various career opportunities for Aboriginal and Torres Strait Islanders to help them prosper and grow.</p>
+<p className="typography-body-10 text-muted mb-3 italic">Note: Don’t use ‘Indigenous’ as it can be considered offensive; but it may be used when referring to programs or business names and units.</p>
+</div>
+```
 
 ---
 
 Avoid defining people by their disability and aim for positive language.
 
-For example:
-
-> Do: People with impaired vision
->
-> Don’t: Blind people
-
-_Note: Refer to the_ [\_Accessibility GEL Principles\_](/principles/accessibility/) _for more information on designing for an inclusive audience._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> People with impaired vision</p>
+<p className="typography-body-10 mb-3 ml-4"><span className="text-danger font-bold">Don't:</span> Blind people</p>
+<p className="typography-body-10 text-muted italic">Note: Refer to the                <Link href="#" type="inline">Accessibility GEL Principles</Link> for more information on designing for an inclusive audience.</p>
+</div>
+```
 
 ---
 
@@ -38,10 +43,12 @@ Try to keep holidays agnostic where possible.
 
 For example:
 
-> festive season, holiday season
->
-> Do: Lunar New Year
->
-> Don’t: Chinese New Year
-
-_Note: ‘Christmas’ can be used in mass comms but not personalised comms._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> festive season, holiday season</p>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> Lunar New Year</p>
+<p className="typography-body-10 mb-3 ml-4"><span className="text-danger font-bold">Don't:</span> Chinese New Year</p>
+<p className="typography-body-10 text-muted italic">Note: ‘Christmas’ can be used in mass comms but not personalised comms.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/people-diversity/index.yaml b/apps/site/src/content/design-system/content/guidelines/people-diversity/index.yaml
index 5f6053cc0..61584cfb0 100644
--- a/apps/site/src/content/design-system/content/guidelines/people-diversity/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/people-diversity/index.yaml
@@ -1,8 +1,12 @@
 name: People & diversity
 description: A guide to writing for an inclusive audience.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: People and diversity
       slug: people-diversity
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/people-diversity/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/people-diversity/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/ampersands/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/ampersands/content.mdoc
index ea6c7443f..c4db59bd3 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/ampersands/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/ampersands/content.mdoc
@@ -1,9 +1,10 @@
 Replaces the word ‘and’ – often used in headings and navigation menus. Don’t use in body copy unless it’s a noun or otherwise appropriate.
 
-For example:
-
-> Terms & Conditions
->
-> Travel & International
-
-_Note: Use of ampersands is subject to brand, legal and compliance reviews._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">Terms & Conditions</p>
+<p className="typography-body-10 mb-6 ml-4">Travel & International</p>
+<p className="typography-body-10 text-muted italic">Note: Use of ampersands is subject to brand, legal and compliance reviews.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/apostrophes/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/apostrophes/content.mdoc
index cf795e930..53ea51dfc 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/apostrophes/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/apostrophes/content.mdoc
@@ -1,12 +1,13 @@
 Used to indicate either possession or the omission of letters, as in an abbreviation or contraction.
 
-For example:
-
-> The industry’s grown 3% in the past 12 months.
->
-> It’s, here’s, you’ll, etc.
->
-> Look n’ feel, mix n’ match, etc.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">The industry’s grown 3% in the past 12 months.</p>
+<p className="typography-body-10 mb-2 ml-4">It’s, here’s, you’ll, etc.</p>
+<p className="typography-body-10 ml-4">Look n’ feel, mix n’ match, etc.</p>
+</div>
+```
 
 ---
 
@@ -16,40 +17,49 @@ For example:
 
 ‘Its’ is a possessive pronoun meaning 'belonging to it'.
 
-For example:
-
-> **It's** our lowest fixed rate in 30 years.
->
-> We’ve reduced **its** interest rate…
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><b>It's</b> our lowest fixed rate in 30 years.</p>
+<p className="typography-body-10 ml-4">We’ve reduced <b>its</b> interest rate…</p>
+</div>
+```
 
 ---
 
 When plural nouns end in 's', add the apostrophe after the ‘s’ to indicate possession.
 
-For example:
-
-> Both accounts’ eligibility requirements are the same.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-6 ml-4">Both accounts’ eligibility requirements are the same.</p>
+<p className="typography-body-10 text-muted mb-3 italic">Note: Never use Westpacs' – reword the sentence to avoid the punctuation.</p>
 
-_Note: Never use Westpacs' – reword the sentence to avoid the punctuation._
+</div>
+```
 
 ---
 
 Names ending in ‘s’ should have an ‘s on the end to indicate possession.
 
-For example:
-
-> Alexis's savings doubled in 12 months.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Alexis's savings doubled in 12 months.</p>
+</div>
+```
 
 ---
 
 Don’t use an apostrophe for plurals.
 
-For example:
-
-> ATMs
->
-> 1990s
->
-> PDFs
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">ATMs</p>
+<p className="typography-body-10 mb-2 ml-4">1990s</p>
+<p className="typography-body-10 mb-6 ml-4">PDFs</p>
+<p className="typography-body-10 text-muted mb-3 italic">Note: Plural nouns that don’t end in 's' use an apostrophe and ‘s’ in the possessive e.g. Children’s account.</p>
 
-_Note: Plural nouns that don’t end in 's' use an apostrophe and ‘s’ in the possessive e.g. Children’s account._
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/colons/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/colons/content.mdoc
index 60423193d..33d864315 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/colons/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/colons/content.mdoc
@@ -1,32 +1,43 @@
 Used to indicate that something follows, such as a list or examples.
 
-For example:
-
-> Enjoy the benefits of eStatements:
->
-> - More secure
-> - Environmentally friendly
-> - Clutter free
-> - Convenient
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10">Enjoy the benefits of eStatements:</p>
+  <List className="list-disc">
+    <List.Item className="typography-body-10">More secure</List.Item>
+    <List.Item className="typography-body-10">Environmentally friendly
+    </List.Item>
+    <List.Item className="typography-body-10">Clutter free</List.Item>
+    <List.Item className="typography-body-10">Convenient</List.Item>
+  </List>
+</div>
+```
 
 ---
 
 Capitalise the first letter of each bullet point, unless it continues a sentence started by the introductory clause.
 
-For example:
-
-> How to apply for a loan at Westpac:
->
-> 1.  Online
-> 2.  Branch
-> 3.  Phone
-
-_Note: Only use full stops on the end of bullet points that are relatively lengthy._
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10">How to apply for a loan at Westpac:</p>
+  <List className="list-disc">
+    <List.Item className="typography-body-10">Online</List.Item>
+    <List.Item className="typography-body-10">Branch</List.Item>
+    <List.Item className="typography-body-10">Phone</List.Item>
+  </List>
+<p className="typography-body-10 text-muted mb-3 italic">Note: Only use full stops on the end of bullet points that are relatively lengthy.</p>
+</div>
+```
 
 ---
 
 A colon is also used where space is limited and separating a field name from data without a colon may confuse a customer.
 
-For example:
-
-> Account balance: $503.49
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Account balance: $503.49</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/commas/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/commas/content.mdoc
index b699fc46c..eaf02522f 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/commas/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/commas/content.mdoc
@@ -1,33 +1,43 @@
 Used to indicate a reading pause in a sentence, improving the flow of the message.
 
-For example:
-
-> With your Westpac Digital Card, you’ll never be without your card again.
-
-_Note: Read the sentence aloud to check if your commas are reflecting your pauses._
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4 mb-6">With your Westpac Digital Card, you’ll never be without your card again.</p>
+<p className="typography-body-10 text-muted mb-3 italic">Note: Read the sentence aloud to check if your commas are reflecting your pauses.</p>
+</div>
+```
 
 ---
 
 Oxford commas are added before the word 'and' to help avoid confusion.
 
-For example:
-
-> Credit criteria, terms and conditions, and eligibility apply.
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Credit criteria, terms and conditions, and eligibility apply.</p>
+</div>
+```
 
 ---
 
 Use a comma before the word ‘but’ if joining two sentences. No comma if it’s one sentence.
 
-For example:
-
-> You won’t be able to access your Online Banking or Westpac App during this time, **but** you can still get in touch with us via phone or by dropping into branch.
-
-> The Banking Executive Accountability Regime will strengthen confidence in the financial sector **but** needs to be thought through to avoid unintended consequences.
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4 mb-6">You won’t be able to access your Online Banking or Westpac App during this time, <b>but</b> you can still get in touch with us via phone or by dropping into branch.</p>
+<p className="typography-body-10 ml-4">The Banking Executive Accountability Regime will strengthen confidence in the financial sector <b>but</b> needs to be thought through to avoid unintended consequences.</p>
+</div>
+```
 
 ---
 
 Use commas to separate names from titles.
 
-For example:
-
-> Peter King, Westpac Group CEO, was appointed in April 2020.
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">Peter King, Westpac Group CEO, was appointed in April 2020.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/exclamation-marks/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/exclamation-marks/content.mdoc
index 1423bf0cd..1b399b8f1 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/exclamation-marks/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/exclamation-marks/content.mdoc
@@ -1,7 +1,9 @@
 Lifts the tempo of a word or phrase. Use sparingly and only when appropriate.
 
-For example:
-
-> Do: Congratulations!
->
-> Don't: Get in touch with us!
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> Congratulations!</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> Get in touch with us!</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/full-stops/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/full-stops/content.mdoc
index d89005e65..2b9a6c59e 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/full-stops/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/full-stops/content.mdoc
@@ -2,19 +2,24 @@ No full stops on the end of headings or sub-headings.
 
 Use full stops for sub-copy and body copy.
 
-For example:
-
-> **Tap into simpler banking**
->
-> Introducing the new Westpac App. Enjoy simpler, smarter and smoother banking with the new Westpac App for iPhone.
-
----
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<h4 className="typography-body-10 mb-2 ml-3"><b>Tap into simpler banking</b></h4>
+<p className="typography-body-10  mb-2 ml-3">Introducing the new Westpac App. Enjoy simpler, smarter and smoother banking with the new Westpac App for iPhone.</p>
+</div>
+```
 
-_Note: You can use a full stop to break up a headline, but no full stop on the end._
+*Note: You can use a full stop to break up a headline, but no full stop on the end.*
 
 For example:
 
-> LIFE IS EVENTFUL. THAT’S WHY WE HELP
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  mb-2 ml-3">LIFE IS EVENTFUL. THAT’S WHY WE HELP</p>
+</div>
+```
 
 ---
 
@@ -24,24 +29,33 @@ No full stops on the end for:
 - URLs
 - Email addresses
 
-For example:
-
-> **Download now**
->
-> **\>** Learn more about the Westpac App
->
-> westpac.com.au/westpacapp
->
-> brand@westpac.com.au
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  mb-4 ml-3"><Button>
+  Download now
+</Button></p>
+<p className="typography-body-10  mb-4 ml-3"><Link href="#" iconBefore={ArrowRightIcon}>
+    Learn more about the Westpac App
+  </Link></p>
+<p className="typography-body-10 mb-4 ml-3"><Link href="#" type="inline">westpac.com.au/westpacapp</Link></p>
+<p className="typography-body-10 ml-3"><Link href="#" type="inline">brand@westpac.com.au</Link></p>
+</div>
+```
 
 ---
 
 Don’t use full stops on the end of bullet points unless each is relatively lengthy.
 
-For example:
-
-> How to apply for a loan:
->
-> - Online
-> - Branch
-> - Phone
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10">How to apply for a loan:</p>
+  <List className="list-disc">
+    <List.Item className="typography-body-10">Online</List.Item>
+    <List.Item className="typography-body-10">Branch
+    </List.Item>
+    <List.Item className="typography-body-10">Phone</List.Item>
+  </List>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/hyphens-and-em-dashes/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/hyphens-and-em-dashes/content.mdoc
index e89eb7b99..ad0ee34a1 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/hyphens-and-em-dashes/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/hyphens-and-em-dashes/content.mdoc
@@ -1,37 +1,39 @@
 Hyphens are used to join words to indicate that they have a combined meaning (such as compound adjectives), or that they’re linked in the grammar of a sentence.
 
-For example:
-
-> Up-to-date
->
-> Interest-free
->
-> Long-term
-
-_Note: No space on either side of the hyphen._
-
-For example:
-
-> Connect to a third party using a third-party connection
-
-_Note: ‘third party’ is a noun so it has no hyphen, while ‘third-party’ is a compound adjective so it has a hyphen._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-3 ml-4">Up-to-date</p>
+<p className="typography-body-10 mb-3 ml-4">Interest-free</p>
+<p className="typography-body-10 mb-6 ml-4">Long-term</p>
+<p className="typography-body-10 text-muted mb-8 italic">Note: No space on either side of the hyphen.</p>
+
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-6 ml-4">Connect to a third party using a third-party connection</p>
+<p className="typography-body-10 text-muted italic">Note: ‘third party’ is a noun so it has no hyphen, while ‘third-party’ is a compound adjective so it has a hyphen.</p>
+</div>
+```
 
 ---
 
 Use em dashes to add extra information or use instead of commas.
 
-For example:
-
-> Updating your contact details in Online Banking and the Westpac App is quick and easy – no need to wait in line or call us.
-
-> It’s good to know you have money set aside to help cope with what life – or business conditions – might throw at you.
-
-_Note: Don’t use colons and ensure there are spaces on both sides of the em dash._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-6 ml-4">Updating your contact details in Online Banking and the Westpac App is quick and easy – no need to wait in line or call us.</p>
+<p className="typography-body-10 mb-6 ml-4">It’s good to know you have money set aside to help cope with what life – or business conditions – might throw at you.</p>
+<p className="typography-body-10 text-muted italic">Note: Don’t use colons and ensure there are spaces on both sides of the em dash.</p>
+</div>
+```
 
 ---
 
 No hyphen on ‘e’ (electronic) words.
 
-For example:
-
-> eStatements, ecommerce, email
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">eStatements, ecommerce, email</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/per-cent/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/per-cent/content.mdoc
index 6e33bece5..cdd335236 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/per-cent/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/per-cent/content.mdoc
@@ -1,5 +1,8 @@
 Use the symbol instead of the word.
 
-For example:
-
-> 1.99% p.a. fixed rate
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">1.99% p.a. fixed rate</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/quatation-marks/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/quatation-marks/content.mdoc
index a1389a1a5..7fb696570 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/quatation-marks/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/quatation-marks/content.mdoc
@@ -1,9 +1,10 @@
 Double quotation marks are used to mark speech. Single quotation marks (inverted commas) are used for descriptions.
 
-For example:
-
-> Westpac Group CEO, Peter King, said “I’m proud to launch our latest Access and Inclusion Plan today.”
->
-> For more information, download our ‘First Home Buyers Guide’.
->
-> Search ‘Westpac Choice’
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-3 ml-4">Westpac Group CEO, Peter King, said “I’m proud to launch our latest Access and Inclusion Plan today.”</p>
+<p className="typography-body-10 mb-3 ml-4">For more information, download our ‘First Home Buyers Guide’.</p>
+<p className="typography-body-10 ml-4">Search ‘Westpac Choice’</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/question-mark/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/question-mark/content.mdoc
index 7452f9e7b..7e0b297ca 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/question-mark/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/question-mark/content.mdoc
@@ -1,7 +1,9 @@
 Engages customers and can help shorten headlines
 
-For example:
-
-> WANT $3K CASHBACK?
->
-> Switch your home loan to Westpac.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-3 ml-4">WANT $3K CASHBACK?</p>
+<p className="typography-body-10 ml-4">Switch your home loan to Westpac.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/semi-colons/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/semi-colons/content.mdoc
index 2318de780..dcfd2ac57 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/semi-colons/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/semi-colons/content.mdoc
@@ -1,7 +1,9 @@
 Used to separate two sentences that are closely related but could also stand on their own.
 
-For example:
-
-> Choose Business One Low if you mainly bank online; and pay no monthly fee for the first year.
-
-_Note: Often used to break up complex sentences that have multiple messages – typically used in legal-led comms._
+```jsx
+<div>
+  <h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4 mb-6">Choose Business One Low if you mainly bank online; and pay no monthly fee for the first year.</p>
+<p className="typography-body-10 text-muted mb-3 italic">Note: Often used to break up complex sentences that have multiple messages – typically used in legal-led comms.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/slashes/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/slashes/content.mdoc
index 173fd384e..01ab82631 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/slashes/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/slashes/content.mdoc
@@ -1,15 +1,12 @@
 Don't use spaces on the sides of a forward slash.
 
-For example:
-
-> Do: and/or
-
-> Don’t: and / or
-
-It is also used to replace the word ‘per’.
-
-For example:
-
-> Do: $100,000/year
-
-> Don’t: $100,000/yearly
\ No newline at end of file
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> and/or</p>
+<p className="typography-body-10 mb-6 ml-4"><span className="text-danger font-bold">Don't:</span> and / or</p>
+<p className="typography-body-10 mb-4">It is also used to replace the word ‘per’.</p>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> $100,000/year</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> $100,000/yearly</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/index.yaml b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/index.yaml
index baf0cc557..dc9f4cbdc 100644
--- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/index.yaml
@@ -1,40 +1,56 @@
 name: Punctuation & symbols
 description: Punctuation and symbols are used to structure or clarify the meaning of text.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Ampersands [&]
       slug: ampersands
+    noTitle: false
   - title:
       name: Apostrophes [']
       slug: apostrophes
+    noTitle: false
   - title:
       name: Colons [:]
       slug: colons
+    noTitle: false
   - title:
       name: Commas [,]
       slug: commas
+    noTitle: false
   - title:
       name: Exclamation marks [!]
       slug: exclamation-marks
+    noTitle: false
   - title:
       name: Full stops [.]
       slug: full-stops
+    noTitle: false
   - title:
       name: Hyphens and em - dashes
       slug: hyphens-and-em-dashes
+    noTitle: false
   - title:
       name: Per cent [%]
       slug: per-cent
+    noTitle: false
   - title:
       name: Question mark [?]
       slug: question-mark
+    noTitle: false
   - title:
-      name: Quatation marks ["]
+      name: Quotation marks ["]
       slug: quatation-marks
+    noTitle: false
   - title:
       name: Semi colons [;]
       slug: semi-colons
+    noTitle: false
   - title:
       name: Slashes [/]
       slug: slashes
+    noTitle: false
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/spelling/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/spelling/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/spelling/design/spelling/content.mdoc b/apps/site/src/content/design-system/content/guidelines/spelling/design/spelling/content.mdoc
index c347212d8..de42c4d39 100644
--- a/apps/site/src/content/design-system/content/guidelines/spelling/design/spelling/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/spelling/design/spelling/content.mdoc
@@ -1,19 +1,22 @@
 We use UK English, not US English
 
-For example:
-
-> Do: organisation, colour
-> 
-> Don’t: organization, color
-
-*Note: Don’t rely on Spell Check*
+```jsx
+                             <div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> organisation, colour</p>
+<p className="typography-body-10 mb-6 ml-4"><span className="text-danger font-bold">Don't:</span> organization, color</p>
+<p className="typography-body-10 text-muted italic">Note: Don’t rely on Spell Check</p>
+</div>
+```
 
 ---
 
 ‘Anytime’ vs. ‘any time’
 
-For example:
-
-> Bank online anytime, anywhere.
-> 
-> You can resume your application at any time.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-3">Bank online anytime, anywhere.</p>
+<p className="typography-body-10  ml-3">You can resume your application at any time.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/spelling/index.yaml b/apps/site/src/content/design-system/content/guidelines/spelling/index.yaml
index 18cc17297..817eb5452 100644
--- a/apps/site/src/content/design-system/content/guidelines/spelling/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/spelling/index.yaml
@@ -1,5 +1,7 @@
 name: Spelling
 description: Spelling refers to the forming of words from letters.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Spelling
@@ -7,3 +9,4 @@ design:
     noTitle: true
 accessibility: []
 relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/spelling/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/spelling/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/design/superscripts/content.mdoc b/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/design/superscripts/content.mdoc
index 2826f1ba8..6b96d42fe 100644
--- a/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/design/superscripts/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/design/superscripts/content.mdoc
@@ -1,33 +1,36 @@
 Used to indicate there are related disclaimers or footnotes.
 
-For example:
-
-> You can switch to eStatements for selected accounts – including savings and transaction accounts¹, mortgage accounts¹ and credit cards².
-> 
-> If your cash flow requires some help, link a Business Overdraft to your business transaction account to access additional funds.¹¹
-
-*Note: The superscript goes before full stops or commas unless it refers to a whole sentence, in which case it sits after the full stop.*
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">You can switch to eStatements for selected accounts – including savings and transaction accounts¹, mortgage accounts¹ and credit cards².</p>
+<p className="typography-body-10 mb-6 ml-4">If your cash flow requires some help, link a Business Overdraft to your business transaction account to access additional funds.¹¹</p>
+<p className="typography-body-10 text-muted italic">Note: The superscript goes before full stops or commas unless it refers to a whole sentence, in which case it sits after the full stop.</p>
+</div>
+```
 
 ---
 
 Where possible, avoid using superscripts and disclaimers by hyperlinking the content to another page.
 
-For example:
-
-> You’ll be able to switch to&nbsp;*eStatements*&nbsp;for selected accounts linked to your personal banking profile.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">You’ll be able to switch to <Link href="#" type="inline">eStatements</Link> for selected accounts linked to your personal banking profile.</p>
+</div>
+```
 
 ---
 
 Trademarks and registered business names must appear as per their respective guidelines, including the use of symbols – see the Marketing Checklists of products and categories.
 
-For example:
-
-> BPAY®
-> 
-> Mastercard®
-> 
-> SMS Protect®
-> 
-> Google Pay™
-
-*Note: Symbols are generally only needed on the first mention but always double-check what’s required.*
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">BPAY®</p>
+<p className="typography-body-10 mb-2 ml-4">Mastercard®</p>
+<p className="typography-body-10 mb-2 ml-4">SMS Protect®</p>
+<p className="typography-body-10 mb-6 ml-4">Google Pay™</p>
+<p className="typography-body-10 text-muted italic">Note: Symbols are generally only needed on the first mention but always double-check what’s required.</p>
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/index.yaml b/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/index.yaml
index 43b56e03c..c8635e0c4 100644
--- a/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/index.yaml
@@ -2,6 +2,8 @@ name: Superscripts & trademarks
 description: >-
   Superscripts and trademarks are characters that are set slightly above normal
   lines of texts.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Superscripts
@@ -9,3 +11,4 @@ design:
     noTitle: true
 accessibility: []
 relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/relatedArticles.mdoc b/apps/site/src/content/design-system/content/guidelines/superscripts-trademarks/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/content/guidelines/third-party-websites/design/third-party-websites/content.mdoc b/apps/site/src/content/design-system/content/guidelines/third-party-websites/design/third-party-websites/content.mdoc
index 788764e47..f5185f0e5 100644
--- a/apps/site/src/content/design-system/content/guidelines/third-party-websites/design/third-party-websites/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/third-party-websites/design/third-party-websites/content.mdoc
@@ -1,7 +1,11 @@
 Use hyperlinks to third-party website pages.
 
-For example:
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-3 ml-4">You can lodge your tax return online with <Link href="#" type="inline">MyTax</Link>, which is accessed through <Link href="#" type="inline">myGov</Link>.</p>
 
-> You can lodge your tax return online with&nbsp;myTax, which is accessed through&nbsp;myGov.
+<p className="typography-body-10 text-muted mb-3 italic">Note: Third parties must be authentic and contextually relevant, e.g. ATO, ASIC, Apple.</p>
 
-*Note: Third parties must be authentic and contextually relevant, e.g. ATO, ASIC, Apple*
+</div>
+```
diff --git a/apps/site/src/content/design-system/content/guidelines/third-party-websites/index.yaml b/apps/site/src/content/design-system/content/guidelines/third-party-websites/index.yaml
index cb44cc9dc..5b3025974 100644
--- a/apps/site/src/content/design-system/content/guidelines/third-party-websites/index.yaml
+++ b/apps/site/src/content/design-system/content/guidelines/third-party-websites/index.yaml
@@ -2,14 +2,17 @@ name: Third-party websites
 description: >-
   Third-party websites are websites that don’t relate to any of the Westpac
   brands.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Third-party websites
       slug: third-party-websites
     noTitle: true
 accessibility: []
+relatedComponents: []
 code:
   - title:
       name: Development examples
       slug: development-examples
-relatedComponents: []
+    noTitle: false
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a02dc2ae4..c0f5f7cf3 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -121,6 +121,12 @@
     "./panel": {
       "default": "./dist/components/panel/index.js"
     },
+    "./pass-code": {
+      "default": "./dist/components/pass-code/index.js"
+    },
+    "./pass-code-view": {
+      "default": "./dist/components/pass-code-view/index.js"
+    },
     "./pictogram": {
       "default": "./dist/components/pictogram/index.js"
     },
diff --git a/packages/ui/src/components/filter/components/buttons/buttons.component.tsx b/packages/ui/src/components/filter/components/buttons/buttons.component.tsx
new file mode 100644
index 000000000..5817db035
--- /dev/null
+++ b/packages/ui/src/components/filter/components/buttons/buttons.component.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Button } from '../../../index.js';
+import { generateAriaDescription } from '../../filter.util.js';
+
+import { styles } from './buttons.styles.js';
+import { type ButtonsProps } from './buttons.types.js';
+
+export function Buttons({
+  filterButtons,
+  onClick,
+  selectedButton,
+  resultsFound,
+  tag: Tag = 'div',
+  className,
+  ...props
+}: ButtonsProps) {
+  return (
+    <Tag className={styles({ className })} {...props}>
+      {filterButtons.map(button => (
+        <Button
+          aria-pressed={button.id === selectedButton}
+          aria-description={generateAriaDescription(button.id, selectedButton, filterButtons.length, resultsFound)}
+          aria-label={button.text}
+          look="hero"
+          size="small"
+          onClick={() => onClick(button.id)}
+          key={button.id}
+          soft={button.id !== selectedButton}
+        >
+          {button.text}
+        </Button>
+      ))}
+    </Tag>
+  );
+}
diff --git a/packages/ui/src/components/filter/components/buttons/buttons.styles.ts b/packages/ui/src/components/filter/components/buttons/buttons.styles.ts
new file mode 100644
index 000000000..6d9bff8be
--- /dev/null
+++ b/packages/ui/src/components/filter/components/buttons/buttons.styles.ts
@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'flex w-full gap-1 overflow-auto whitespace-nowrap',
+});
diff --git a/packages/ui/src/components/filter/components/buttons/buttons.types.ts b/packages/ui/src/components/filter/components/buttons/buttons.types.ts
new file mode 100644
index 000000000..243349b02
--- /dev/null
+++ b/packages/ui/src/components/filter/components/buttons/buttons.types.ts
@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react';
+
+export type FilterButtonProps = {
+  /**
+   * id for the button used for the key and knowing which button is selected
+   */
+  id: string;
+  /**
+   * The text that displays on the button and used in aria-label
+   */
+  text: string;
+};
+
+export type ButtonsProps = {
+  /**
+   * An array of FilterButtonProps that generate buttons for the filter
+   * - id: used to identify selected button and for key `string`
+   * - text: text on the button `string`
+   */
+  filterButtons: FilterButtonProps[];
+  /**
+   * Function that is called when a button on the filter is clicked
+   */
+  onClick: (id: string) => unknown;
+  /**
+   * Needed for custom `aria-description`, number of results filter returns
+   */
+  resultsFound: number;
+  /**
+   * id of which button should be selected
+   */
+  selectedButton: string;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & Omit<HTMLAttributes<Element>, 'onClick'>;
diff --git a/packages/ui/src/components/filter/components/buttons/index.ts b/packages/ui/src/components/filter/components/buttons/index.ts
new file mode 100644
index 000000000..1dcf5d7df
--- /dev/null
+++ b/packages/ui/src/components/filter/components/buttons/index.ts
@@ -0,0 +1,2 @@
+export { Buttons } from './buttons.component.js';
+export { type ButtonsProps } from './buttons.types.js';
diff --git a/packages/ui/src/components/filter/components/index.ts b/packages/ui/src/components/filter/components/index.ts
new file mode 100644
index 000000000..9c1ea039d
--- /dev/null
+++ b/packages/ui/src/components/filter/components/index.ts
@@ -0,0 +1,2 @@
+export * from './buttons/index.js';
+export * from './input/index.js';
diff --git a/packages/ui/src/components/filter/components/input/index.ts b/packages/ui/src/components/filter/components/input/index.ts
new file mode 100644
index 000000000..ca0fb4c79
--- /dev/null
+++ b/packages/ui/src/components/filter/components/input/index.ts
@@ -0,0 +1 @@
+export { Input } from './input.component.js';
diff --git a/packages/ui/src/components/filter/components/input/input.component.tsx b/packages/ui/src/components/filter/components/input/input.component.tsx
new file mode 100644
index 000000000..39516e957
--- /dev/null
+++ b/packages/ui/src/components/filter/components/input/input.component.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { SearchIcon } from '../../../icon/index.js';
+import { Input as GELInput, InputField, type InputProps } from '../../../index.js';
+
+export function Input({ onChange, ...props }: InputProps) {
+  return (
+    <InputField className="mb-0" before={{ icon: SearchIcon }}>
+      <GELInput {...props} placeholder="Search" onChange={onChange} />
+    </InputField>
+  );
+}
diff --git a/packages/ui/src/components/filter/filter.component.tsx b/packages/ui/src/components/filter/filter.component.tsx
new file mode 100644
index 000000000..60ebe5759
--- /dev/null
+++ b/packages/ui/src/components/filter/filter.component.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Buttons, Input } from './components/index.js';
+import { type FilterProps } from './filter.types.js';
+
+export function Filter({ children, ...props }: FilterProps) {
+  return (
+    <div {...props} className="flex flex-col gap-3">
+      {children}
+    </div>
+  );
+}
+Filter.Input = Input;
+Filter.Buttons = Buttons;
diff --git a/packages/ui/src/components/filter/filter.spec.tsx b/packages/ui/src/components/filter/filter.spec.tsx
new file mode 100644
index 000000000..236bd6242
--- /dev/null
+++ b/packages/ui/src/components/filter/filter.spec.tsx
@@ -0,0 +1,79 @@
+import { act, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+
+import { Filter } from './filter.component.js';
+
+const firstBtnText = 'United States';
+const secondBtnText = 'All International';
+
+const filterButtons = [
+  {
+    id: 'one',
+    text: firstBtnText,
+  },
+  {
+    id: 'two',
+    text: secondBtnText,
+  },
+];
+
+describe('Filter', () => {
+  const onChange = vi.fn();
+  const onClick = vi.fn();
+
+  const TestFilter = () => {
+    const [selected, setSelected] = useState<string>('one');
+
+    return (
+      <Filter>
+        <Filter.Input onChange={onChange} />
+        <Filter.Buttons
+          selectedButton={selected}
+          resultsFound={2}
+          onClick={id => {
+            onClick();
+            setSelected(id);
+          }}
+          filterButtons={filterButtons}
+        />
+      </Filter>
+    );
+  };
+
+  it('should render Filter', () => {
+    const { container } = render(<TestFilter />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should render all buttons', () => {
+    const { getByText } = render(<TestFilter />);
+    expect(getByText(firstBtnText)).toBeInTheDocument();
+    expect(getByText(secondBtnText)).toBeInTheDocument();
+  });
+
+  it('should change selected button and call onClick when clicked', async () => {
+    const user = userEvent.setup();
+    const { getByText } = render(<TestFilter />);
+    const defaultSelectedButton = getByText(firstBtnText);
+    const defaultNotSelectedButton = getByText(secondBtnText);
+
+    expect(defaultSelectedButton).toHaveStyle(`background-color: var(--colors-hero)`);
+    expect(defaultNotSelectedButton).toHaveStyle('background-color: #FFFFF');
+
+    await act(() => user.click(defaultNotSelectedButton));
+
+    expect(onClick).toBeCalled();
+    expect(defaultSelectedButton).toHaveStyle('background-color: #FFFFF');
+    expect(defaultNotSelectedButton).toHaveStyle(`background-color: var(--colors-hero)`);
+  });
+
+  it('should call onChange when something is typed in the input', async () => {
+    const user = userEvent.setup();
+    const { getByRole } = render(<TestFilter />);
+    const searchInput = getByRole('textbox');
+
+    await act(() => user.type(searchInput, 'test'));
+    expect(onChange).toBeCalled();
+  });
+});
diff --git a/packages/ui/src/components/filter/filter.stories.tsx b/packages/ui/src/components/filter/filter.stories.tsx
new file mode 100644
index 000000000..462371cca
--- /dev/null
+++ b/packages/ui/src/components/filter/filter.stories.tsx
@@ -0,0 +1,379 @@
+/* eslint-disable no-console */
+import { type Meta, type StoryObj } from '@storybook/react';
+import { useMemo, useState } from 'react';
+
+import { InfoIcon } from '../icon/index.js';
+import { FlexiCell } from '../index.js';
+
+import { ButtonsProps } from './components/index.js';
+import { Filter } from './filter.component.js';
+
+function StoryFilter({ filterButtons }: ButtonsProps) {
+  const [selected, setSelected] = useState<string>('one');
+
+  return (
+    <Filter>
+      <Filter.Input onChange={({ target: { value } }) => console.log(value)} />
+      <Filter.Buttons
+        filterButtons={filterButtons}
+        selectedButton={selected}
+        onClick={id => setSelected(id)}
+        resultsFound={2}
+      />
+    </Filter>
+  );
+}
+
+// Typing is not included with Meta as it doesn't work nicely with this component and all props are described anyway
+const meta: Meta = {
+  title: 'Components/Filter',
+  component: StoryFilter,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  decorators: [
+    story => (
+      <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '1rem', width: '320px' }}>{story()}</div>
+    ),
+  ],
+  argTypes: {
+    children: {
+      description: '`Filter` Should contain `Filter.Input` and `Filter.Buttons` components',
+      type: { name: 'other', value: 'ReactNode' },
+    },
+    filterButtons: {
+      description:
+        ' `Filter.Buttons` An array of FilterButtonProps that generate buttons for the filter \n\n- id: used to identify selected button and for key `string` \n\n- text: text on the button `string`',
+    },
+    onClick: {
+      description: '`Filter.Buttons` Function that is called when a button on the filter is clicked',
+      type: 'function',
+    },
+    onChange: {
+      description: '`Filter.Input` Function that is called when the input is changed',
+      type: 'function',
+    },
+    resultsFound: {
+      description: '`Filter.Buttons` Needed for custom `aria-description`, number of results filter returns',
+      type: 'number',
+    },
+    selectedButton: {
+      description: '`Filter.Buttons` id of which button should be selected',
+      type: 'string',
+    },
+  },
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Filter example
+ */
+export const Default: Story = {
+  decorators: [
+    story => (
+      <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '1rem', width: '500px' }}>{story()}</div>
+    ),
+  ],
+  args: {
+    filterButtons: [
+      {
+        id: 'one',
+        text: 'United States',
+      },
+      {
+        id: 'two',
+        text: 'All International',
+      },
+    ],
+  },
+};
+
+/**
+ * > Filter with enough buttons to exceed screen width example
+ */
+export const ContentExceedingScreenWidth: Story = {
+  args: {
+    filterButtons: [
+      {
+        id: 'one',
+        text: 'All',
+      },
+      {
+        id: 'two',
+        text: 'Payees',
+      },
+      {
+        id: 'three',
+        text: 'PayID',
+      },
+      {
+        id: 'four',
+        text: 'Billers',
+      },
+      {
+        id: 'five',
+        text: 'International Payees',
+      },
+    ],
+  },
+};
+
+/**
+ * > Filter with a button with long content example
+ */
+export const LongContent: Story = {
+  args: {
+    filterButtons: [
+      {
+        id: 'one',
+        text: 'This is a filter with long content',
+      },
+      {
+        id: 'two',
+        text: 'Payees',
+      },
+      {
+        id: 'three',
+        text: 'PayID',
+      },
+      {
+        id: 'four',
+        text: 'Billers',
+      },
+    ],
+  },
+};
+
+/**
+ * > Filter with a button with long content example
+ */
+export const SmallestBreakpoint: Story = {
+  args: {
+    filterButtons: [
+      {
+        id: 'one',
+        text: 'All',
+      },
+      {
+        id: 'two',
+        text: 'Payees',
+      },
+      {
+        id: 'three',
+        text: 'PayID',
+      },
+      {
+        id: 'four',
+        text: 'Billers',
+      },
+      {
+        id: 'five',
+        text: 'International Payees',
+      },
+    ],
+  },
+};
+
+const FILTERS = [
+  {
+    id: 'ALL',
+    text: 'All',
+  },
+  {
+    id: 'USA',
+    text: 'United States',
+  },
+  {
+    id: 'BRL',
+    text: 'Brazil',
+  },
+];
+
+const responsiveString = ' (Responsive)';
+
+type Payee = {
+  bank: string;
+  code: string;
+  countryCode: string;
+  name: string;
+  number: string;
+  paidAt?: string;
+};
+
+type ForeignPayee = {
+  id: string;
+  payees: Payee[];
+  title: string;
+};
+
+const MOCK_FOREIGN_PAYEES: ForeignPayee[] = [
+  {
+    title: 'A',
+    id: 'a',
+    payees: [
+      {
+        name: 'American Apparel',
+        number: '10964567894',
+        bank: 'BANK OF AMERICA, NEW YORK',
+        code: 'NFBKAS33XXX',
+        countryCode: 'USA',
+        paidAt: undefined,
+      },
+      {
+        name: 'Alfred Prince',
+        number: '10964567895',
+        bank: 'BANK OF AMERICA, NEW YORK',
+        code: 'NFBKAS33XXX',
+        countryCode: 'USA',
+        paidAt: undefined,
+      },
+    ],
+  },
+  {
+    title: 'B',
+    id: 'b',
+    payees: [
+      {
+        name: 'Bruno de Souza',
+        number: '10364567894',
+        bank: 'BANK OF BRAZIL, SÃO PAULO',
+        code: 'BRLAS33XXX',
+        countryCode: 'BRL',
+        paidAt: undefined,
+      },
+    ],
+  },
+  {
+    title: 'H',
+    id: 'h',
+    payees: [
+      {
+        name: 'Havana Houseboats',
+        number: '10964567896',
+        bank: 'BANK OF CUBA, HAVANA',
+        code: 'NFBKAS33XXX',
+        countryCode: 'USA',
+        paidAt: undefined,
+      },
+    ],
+  },
+];
+
+/**
+ * > Filter with contents inside
+ */
+export const FilterWithContent = () => {
+  const [selectedFilter, setSelectedFilter] = useState<string>('ALL');
+  const [searchValue, setSearchValue] = useState<string>('');
+
+  const filteredAccounts = useMemo(() => {
+    return MOCK_FOREIGN_PAYEES.map(({ payees, ...props }) => {
+      return {
+        payees: payees.filter(payee => {
+          const payeeNameContainsSearch = payee.name.toUpperCase().indexOf(searchValue.toUpperCase()) !== -1;
+          return selectedFilter === 'ALL'
+            ? payeeNameContainsSearch
+            : payeeNameContainsSearch && payee.countryCode === selectedFilter;
+        }),
+        ...props,
+      };
+    }).filter(({ payees }) => payees.length > 0);
+  }, [searchValue, selectedFilter]);
+
+  const resultsFound = useMemo(() => {
+    return filteredAccounts.reduce((acc, accounts) => {
+      return acc + accounts.payees.length;
+    }, 0);
+  }, [filteredAccounts]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Filter>
+        <Filter.Input value={searchValue} onChange={({ target: { value } }) => setSearchValue(value)} />
+        <Filter.Buttons
+          filterButtons={FILTERS}
+          selectedButton={selectedFilter}
+          onClick={id => setSelectedFilter(id)}
+          resultsFound={resultsFound}
+        />
+      </Filter>
+      <div>
+        {filteredAccounts.map(({ title, id, payees }) => (
+          <div key={id}>
+            <h3 className="mb-3 border-b-[1px] border-border pb-1 font-normal">{title}</h3>
+            {payees.map(({ name, number, paidAt, bank, code }) =>
+              paidAt ? (
+                <FlexiCell
+                  tag="a"
+                  href="#"
+                  key={name}
+                  before={
+                    <FlexiCell.Adornment>
+                      <svg
+                        className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
+                        viewBox="0 0 640 480"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-label="French flag"
+                      >
+                        <path d="M0 0H640V480H0V0Z" fill="white" />
+                        <path d="M0 0H213.3V480H0V0Z" fill="#002654" />
+                        <path d="M426.7 0H640V480H426.7V0Z" fill="#CE1126" />
+                      </svg>
+                    </FlexiCell.Adornment>
+                  }
+                  after={
+                    <FlexiCell.Adornment align="center">
+                      <FlexiCell.Label rightLabel tag="h4">
+                        {paidAt}
+                      </FlexiCell.Label>
+                    </FlexiCell.Adornment>
+                  }
+                  size={{ initial: 'default', sm: 'large' }}
+                >
+                  <FlexiCell.Label tag="h4">{name + responsiveString}</FlexiCell.Label>
+                  <FlexiCell.Hint className="-mb-1">{number}</FlexiCell.Hint>
+                  <FlexiCell.Hint className="-mb-1">{bank}</FlexiCell.Hint>
+                  <FlexiCell.Hint>{code}</FlexiCell.Hint>
+                </FlexiCell>
+              ) : (
+                <FlexiCell
+                  href="#"
+                  dualAction
+                  key={name}
+                  before={
+                    <FlexiCell.Adornment>
+                      <svg
+                        className="h-4 w-4"
+                        viewBox="0 0 640 480"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-label="French flag"
+                      >
+                        <path d="M0 0H640V480H0V0Z" fill="white" />
+                        <path d="M0 0H213.3V480H0V0Z" fill="#002654" />
+                        <path d="M426.7 0H640V480H426.7V0Z" fill="#CE1126" />
+                      </svg>
+                    </FlexiCell.Adornment>
+                  }
+                  after={<FlexiCell.Button icon={() => <InfoIcon look="outlined" />} />}
+                >
+                  <FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
+                  <FlexiCell.Hint className="-mb-1">{number}</FlexiCell.Hint>
+                  <FlexiCell.Hint className="-mb-1">{bank}</FlexiCell.Hint>
+                  <FlexiCell.Hint>{code}</FlexiCell.Hint>
+                </FlexiCell>
+              ),
+            )}
+          </div>
+        ))}
+        {!filteredAccounts.length && <h1>There is no match</h1>}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/filter/filter.types.ts b/packages/ui/src/components/filter/filter.types.ts
new file mode 100644
index 000000000..1980cdb17
--- /dev/null
+++ b/packages/ui/src/components/filter/filter.types.ts
@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+export type FilterProps = {
+  /**
+   * Should contain `Filter.Input` and `Filter.Buttons` components
+   */
+  children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
diff --git a/packages/ui/src/components/filter/filter.util.ts b/packages/ui/src/components/filter/filter.util.ts
new file mode 100644
index 000000000..896daeb51
--- /dev/null
+++ b/packages/ui/src/components/filter/filter.util.ts
@@ -0,0 +1,4 @@
+export const generateAriaDescription = (id: string, selected: string, length: number, results: number) => {
+  if (id === selected) return `${id} of ${length} filters. ${results} results found.`;
+  return `${id} of ${length} filters. Double tap to activate. ${results} results found.`;
+};
diff --git a/packages/ui/src/components/filter/index.ts b/packages/ui/src/components/filter/index.ts
new file mode 100644
index 000000000..0cacfdbb9
--- /dev/null
+++ b/packages/ui/src/components/filter/index.ts
@@ -0,0 +1,2 @@
+export * from './filter.component.js';
+export * from './filter.types.js';
diff --git a/packages/ui/src/components/form/form.stories.tsx b/packages/ui/src/components/form/form.stories.tsx
index 2c3163a40..040da0a3e 100644
--- a/packages/ui/src/components/form/form.stories.tsx
+++ b/packages/ui/src/components/form/form.stories.tsx
@@ -33,30 +33,42 @@ export const Default: Story = {
           <Form.Section>
             <Form.Group>
               <Form.Label htmlFor="example-default-1">This is a label</Form.Label>
-              <Form.Hint>This is a hint</Form.Hint>
-              <Form.ErrorMessage message="This is an error message" />
-              <Input name="example-default-1" />
+              <Form.Hint id="example-default-1-hint">This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" id="example-default-1-error" />
+              <Input
+                name="example-default-1"
+                id="example-default-1"
+                aria-describedby="example-default-1-hint example-default-1-error"
+              />
             </Form.Group>
 
             <Form.Group>
               <Form.Label htmlFor="example-default-2">This is a label</Form.Label>
-              <Form.Hint>This is a hint</Form.Hint>
-              <Form.ErrorMessage message="This is an error message" />
-              <Input name="example-default-2" />
+              <Form.Hint id="example-default-2-hint">This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" id="example-default-2-error" />
+              <Input
+                name="example-default-2"
+                id="example-default-2"
+                aria-describedby="example-default-2-hint example-default-2-error"
+              />
             </Form.Group>
           </Form.Section>
 
           <Form.Section>
             <Form.Group>
               <Form.Label htmlFor="example-default-3">This is a label</Form.Label>
-              <Form.Hint>This is a hint</Form.Hint>
-              <Form.ErrorMessage message="This is an error message" />
-              <Input name="example-default-3" />
+              <Form.Hint id="example-default-3-hint">This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" id="example-default-3-error" />
+              <Input
+                name="example-default-3"
+                id="example-default-3"
+                aria-describedby="example-default-3-hint example-default-3-error"
+              />
             </Form.Group>
           </Form.Section>
         </Form>
 
-        <hr />
+        <hr className="my-4 border-t border-t-border" />
 
         <h2 className="typography-body-7 my-4 font-bold">Large size with large spacing</h2>
         <Form spacing="large">
@@ -70,25 +82,40 @@ export const Default: Story = {
           <Form.Section>
             <Form.Group>
               <Form.Label htmlFor="example-large-1">This is a label</Form.Label>
-              <Form.Hint>This is a hint</Form.Hint>
-              <Form.ErrorMessage message="This is an error message" />
-              <Input name="example-large-1" size="large" />
+              <Form.Hint id="example-large-1-hint">This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" id="example-large-1-error" />
+              <Input
+                name="example-large-1"
+                size="large"
+                id="example-large-1"
+                aria-describedby="example-large-1-hint example-large-1-error"
+              />
             </Form.Group>
 
             <Form.Group>
               <Form.Label htmlFor="example-large-2">This is a label</Form.Label>
-              <Form.Hint>This is a hint</Form.Hint>
-              <Form.ErrorMessage message="This is an error message" />
-              <Input name="example-large-2" size="large" />
+              <Form.Hint id="example-large-2-hint">This is a hint</Form.Hint>
+              <Form.ErrorMessage id="example-large-2-error" message="This is an error message" />
+              <Input
+                name="example-large-2"
+                size="large"
+                id="example-large-2"
+                aria-describedby="example-large-2-hint example-large-2-error"
+              />
             </Form.Group>
           </Form.Section>
 
           <Form.Section>
             <Form.Group>
               <Form.Label htmlFor="example-large-3">This is a label</Form.Label>
-              <Form.Hint>This is a hint</Form.Hint>
-              <Form.ErrorMessage message="This is an error message" />
-              <Input name="example-large-3" size="large" />
+              <Form.Hint id="example-large-3-hint">This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" id="example-large-3-error" />
+              <Input
+                name="example-large-3"
+                size="large"
+                id="example-large-3"
+                aria-describedby="example-large-3-hint example-large-3-error"
+              />
             </Form.Group>
           </Form.Section>
         </Form>
@@ -105,10 +132,13 @@ export const MultipleErrors: Story = {
   render: () => {
     return (
       <Form>
-        <Form.Label>This is a label</Form.Label>
-        <Form.Hint>This is a hint</Form.Hint>
-        <Form.ErrorMessage message={['This is an error message', 'another error message']} />
-        <Input />
+        <Form.Label htmlFor="example-m-errors">This is a label</Form.Label>
+        <Form.Hint id="example-m-errors-hint">This is a hint</Form.Hint>
+        <Form.ErrorMessage
+          message={['This is an error message', 'another error message']}
+          id="example-m-errors-message"
+        />
+        <Input id="example-m-errors" aria-describedby="example-m-errors-hint example-m-errors-message" />
       </Form>
     );
   },
@@ -124,10 +154,10 @@ export const Size: Story = {
       <div className="flex flex-col gap-3">
         <Form>
           <h3>Sizing is currently handled on the child level. See example of size prop on Input component in code.</h3>
-          <Form.Label>This is a label</Form.Label>
-          <Form.Hint>This is a hint</Form.Hint>
-          <Form.ErrorMessage message="This is an error message" />
-          <Input size="large" />
+          <Form.Label htmlFor="example-size">This is a label</Form.Label>
+          <Form.Hint id="example-size-hint">This is a hint</Form.Hint>
+          <Form.ErrorMessage message="This is an error message" id="example-size-error" />
+          <Input size="large" id="example-size" aria-describedby="example-size-hint example-size-error" />
         </Form>
       </div>
     );
@@ -145,10 +175,10 @@ export const AllSpacings: Story = {
         {(['medium', 'large'] as const).map(size => (
           <Form spacing={size}>
             <h3>Form with Spacing:{size}. Sets spacing between label, hint and form groups.</h3>
-            <Form.Label>This is a label</Form.Label>
-            <Form.Hint>This is a hint</Form.Hint>
-            <Form.ErrorMessage message="This is an error message" />
-            <Input />
+            <Form.Label htmlFor={`space-${size}`}>This is a label</Form.Label>
+            <Form.Hint id={`space-${size}-hint`}>This is a hint</Form.Hint>
+            <Form.ErrorMessage message="This is an error message" id={`space-${size}-error`} />
+            <Input id={`space-${size}`} aria-describedby={`space-${size}-hint space-${size}-error`} />
           </Form>
         ))}
       </div>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 38af7a1a5..e59dd210c 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -38,6 +38,9 @@ export * from './repeater/index.js';
 export * from './error-message/index.js';
 export * from './form-label/index.js';
 export * from './form-hint/index.js';
+export * from './filter/index.js';
 export * from './field/index.js';
 export * from './bottom-sheet/index.js';
 export * from './heading/index.js';
+export * from './pass-code/index.js';
+export * from './pass-code-view/index.js';
diff --git a/packages/ui/src/components/pass-code-view/index.ts b/packages/ui/src/components/pass-code-view/index.ts
new file mode 100644
index 000000000..0c12bf7f6
--- /dev/null
+++ b/packages/ui/src/components/pass-code-view/index.ts
@@ -0,0 +1,2 @@
+export { PassCodeView } from './pass-code-view.component.js';
+export { type PassCodeViewProps } from './pass-code-view.types.js';
diff --git a/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx b/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx
new file mode 100644
index 000000000..f5c1b364c
--- /dev/null
+++ b/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { AlertIcon, PadlockIcon } from '../icon/index.js';
+import { Button, Link } from '../index.js';
+import { PassCode } from '../pass-code/pass-code.component.js';
+
+import { PassCodeViewLoader } from './pass-code-view.loader.js';
+import { styles as passCodeViewStyles } from './pass-code-view.styles.js';
+import { type PassCodeViewProps } from './pass-code-view.types.js';
+
+export function PassCodeView({
+  className,
+  tag: Tag = 'div',
+  headerIcon: HeaderIcon = PadlockIcon,
+  header,
+  description,
+  updateButtonLabel = 'update',
+  resendButtonLabel = 'Resend code',
+  onUpdate = () => {
+    return;
+  },
+  onResend = () => {
+    return;
+  },
+  onComplete = () => {
+    return;
+  },
+  errorMessage,
+  passCodeLength = 6,
+  loading = false,
+  ...props
+}: PassCodeViewProps) {
+  const styles = passCodeViewStyles({});
+
+  return (
+    <Tag className={styles.base({ className })} {...props}>
+      {HeaderIcon && <HeaderIcon className={styles.icon()} />}
+      {header && <h3 className={styles.heading()}>{header}</h3>}
+      {loading ? (
+        <PassCodeViewLoader length={passCodeLength} />
+      ) : (
+        <>
+          {description && (
+            <p>
+              {description}
+              <Link type="inline" className={styles.link()} onPress={onUpdate}>
+                {updateButtonLabel}
+              </Link>
+            </p>
+          )}
+          {errorMessage && (
+            <p className="mt-2 flex items-center gap-1 text-danger">
+              <AlertIcon size="small" look="outlined" color="danger" />
+              {errorMessage}
+            </p>
+          )}
+          <PassCode className={styles.passCode()} length={passCodeLength} onComplete={onComplete} />
+          {resendButtonLabel && (
+            <Button look="link" onClick={onResend}>
+              {resendButtonLabel}
+            </Button>
+          )}
+        </>
+      )}
+    </Tag>
+  );
+}
diff --git a/packages/ui/src/components/pass-code-view/pass-code-view.loader.tsx b/packages/ui/src/components/pass-code-view/pass-code-view.loader.tsx
new file mode 100644
index 000000000..90a9d628b
--- /dev/null
+++ b/packages/ui/src/components/pass-code-view/pass-code-view.loader.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export function PassCodeViewLoader({ length }: { length: number }) {
+  return (
+    <div className="w-full px-4">
+      <div className="linear-gradient-style -mx-4 mb-2 h-4 rounded" />
+      <div className="flex justify-center gap-2">
+        {Array.from({ length }).map((_, index) => (
+          <div key={index} className="linear-gradient-style h-7 w-6 rounded-md" />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/pass-code-view/pass-code-view.spec.tsx b/packages/ui/src/components/pass-code-view/pass-code-view.spec.tsx
new file mode 100644
index 000000000..3315ef287
--- /dev/null
+++ b/packages/ui/src/components/pass-code-view/pass-code-view.spec.tsx
@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react';
+
+import { PassCodeView } from './pass-code-view.component.js';
+import { styles } from './pass-code-view.styles.js';
+
+describe('PassCodeView', () => {
+  it('renders the component', () => {
+    const { container } = render(<PassCodeView />);
+    expect(container).toBeInTheDocument();
+  });
+  it('renders the style correctly', () => {
+    const style = styles();
+    // TODO: use some variants for test
+    expect(style.base()).toBe('flex flex-col items-center');
+    expect(style.heading()).toBe('typography-body-5 mb-3 font-bold');
+    expect(style.link()).toBe('ml-1 cursor-pointer');
+    expect(style.passCode()).toBe('my-3');
+    expect(style.icon()).toBe('mb-3');
+  });
+});
diff --git a/packages/ui/src/components/pass-code-view/pass-code-view.stories.tsx b/packages/ui/src/components/pass-code-view/pass-code-view.stories.tsx
new file mode 100644
index 000000000..00f719052
--- /dev/null
+++ b/packages/ui/src/components/pass-code-view/pass-code-view.stories.tsx
@@ -0,0 +1,46 @@
+import { action } from '@storybook/addon-actions';
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { PassCodeView } from './pass-code-view.component.js';
+
+const meta: Meta<typeof PassCodeView> = {
+  title: 'Components/PassCodeView',
+  component: PassCodeView,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    header: 'Enter SMS code',
+    description: 'Send to mobile ending ...XXXX',
+    passCodeLength: 6,
+    onComplete: action('onComplete'),
+    onResend: action('onResend'),
+    onUpdate: action('onUpdate'),
+  },
+};
+
+/**
+ * > With error example
+ */
+export const WithErrorStory: Story = {
+  args: {
+    header: 'Enter SMS code',
+    description: 'Send to mobile ending ...XXXX',
+    passCodeLength: 6,
+    errorMessage: 'Try again (2 attempts remaining)',
+    onComplete: action('onComplete'),
+    onResend: action('onResend'),
+    onUpdate: action('onUpdate'),
+  },
+};
diff --git a/packages/ui/src/components/pass-code-view/pass-code-view.styles.ts b/packages/ui/src/components/pass-code-view/pass-code-view.styles.ts
new file mode 100644
index 000000000..c199aeab6
--- /dev/null
+++ b/packages/ui/src/components/pass-code-view/pass-code-view.styles.ts
@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'flex flex-col items-center',
+      heading: 'typography-body-5 mb-3 font-bold',
+      link: 'ml-1 cursor-pointer',
+      passCode: 'my-3',
+      icon: 'mb-3',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);
diff --git a/packages/ui/src/components/pass-code-view/pass-code-view.types.ts b/packages/ui/src/components/pass-code-view/pass-code-view.types.ts
new file mode 100644
index 000000000..85305e155
--- /dev/null
+++ b/packages/ui/src/components/pass-code-view/pass-code-view.types.ts
@@ -0,0 +1,58 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { PassCodeProps } from '../pass-code/pass-code.types.js';
+
+import { styles } from './pass-code-view.styles.js';
+
+export type PassCodeViewProps = {
+  /**
+   * description text
+   */
+  description?: ReactNode;
+  /**
+   * error message
+   */
+  errorMessage?: ReactNode;
+  /**
+   * header text
+   */
+  header?: ReactNode;
+  /**
+   * icon on the header
+   */
+  headerIcon?: React.ElementType;
+  /**
+   * boolean to show skeleton
+   */
+  loading?: boolean;
+  /**
+   * callback when the value is completely typed
+   */
+  onComplete?: PassCodeProps['onComplete'];
+  /**
+   * on click the resend button
+   */
+  onResend?: () => any;
+  /**
+   * on click the update button
+   */
+  onUpdate?: () => any;
+  /**
+   * length of the passcode
+   */
+  passCodeLength?: number;
+  /**
+   * label for resend button
+   */
+  resendButtonLabel?: ReactNode;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+  /**
+   * label for update button
+   */
+  updateButtonLabel?: ReactNode;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;
diff --git a/packages/ui/src/components/pass-code/index.ts b/packages/ui/src/components/pass-code/index.ts
new file mode 100644
index 000000000..7eb929f55
--- /dev/null
+++ b/packages/ui/src/components/pass-code/index.ts
@@ -0,0 +1,2 @@
+export { PassCode } from './pass-code.component.js';
+export { type PassCodeProps } from './pass-code.types.js';
diff --git a/packages/ui/src/components/pass-code/pass-code.component.tsx b/packages/ui/src/components/pass-code/pass-code.component.tsx
new file mode 100644
index 000000000..3528ddfcf
--- /dev/null
+++ b/packages/ui/src/components/pass-code/pass-code.component.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import React, { ChangeEvent, ClipboardEvent, KeyboardEvent, useCallback, useRef, useState } from 'react';
+
+import { Input } from '../index.js';
+
+import { styles as passCodeStyles } from './pass-code.styles.js';
+import { type PassCodeProps } from './pass-code.types.js';
+
+export function PassCode({ length, onComplete, className, ...props }: PassCodeProps) {
+  const [passcode, setPasscode] = useState<(string | undefined)[]>(Array.from({ length }).map(() => undefined));
+  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+
+  const styles = passCodeStyles({});
+
+  const handleChange = useCallback(
+    (index: number, event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value.slice(-1);
+
+      // Update the passcode state
+      const newPasscode = [...passcode.slice(0, index), value, ...passcode.slice(index + 1)];
+      setPasscode(newPasscode);
+
+      // Move to the next input if available
+      if (index < length - 1 && value !== '') {
+        inputRefs.current[index + 1]?.focus();
+      }
+
+      // Call onComplete when passcode is complete
+      if (newPasscode.filter(passcode => !passcode).length === 0) {
+        onComplete(newPasscode.join(''));
+      }
+    },
+    [onComplete, inputRefs, passcode],
+  );
+
+  const handlePaste = useCallback(
+    (index: number, event: ClipboardEvent<HTMLInputElement>) => {
+      event.preventDefault();
+      const pastedData = event.clipboardData.getData('text');
+      const validData = pastedData.slice(0, length - index).split('');
+      const previousSlice = passcode.slice(0, index);
+      const afterSlice = passcode.slice(index);
+      const newPasscode = [...previousSlice, ...[...validData, ...afterSlice.slice(validData.length)]].slice(0, length);
+      setPasscode(newPasscode);
+      if (newPasscode.filter(passcode => !passcode).length === 0) {
+        onComplete(newPasscode.join(''));
+      }
+    },
+    [passcode],
+  );
+
+  const handleKeyDown = useCallback(
+    (index: number, event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Backspace' && index > 0) {
+        event.preventDefault();
+        const newPasscode = [...passcode.slice(0, index), undefined, ...passcode.slice(index + 1)];
+        setPasscode(newPasscode);
+        const previousInput = inputRefs.current[index - 1];
+        const currentInput = inputRefs.current[index];
+        if (previousInput) {
+          previousInput.focus();
+        }
+        if (currentInput) {
+          currentInput.value = '';
+        }
+      }
+    },
+    [inputRefs],
+  );
+
+  const handleFocus = useCallback(
+    (index: number) => {
+      inputRefs.current[index]?.select();
+    },
+    [inputRefs],
+  );
+
+  return (
+    <div {...props} className={styles.base({ className })}>
+      {passcode.map((digit, index) => (
+        <Input
+          size="large"
+          key={index}
+          value={digit}
+          onChange={e => handleChange(index, e)}
+          onPaste={e => handlePaste(index, e)}
+          onKeyDown={e => handleKeyDown(index, e)}
+          onFocus={() => handleFocus(index)}
+          ref={input => (inputRefs.current[index] = input)}
+          className={styles.input({})}
+          aria-label={`Passcode digit ${index + 1}`}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/pass-code/pass-code.spec.tsx b/packages/ui/src/components/pass-code/pass-code.spec.tsx
new file mode 100644
index 000000000..6f2760a12
--- /dev/null
+++ b/packages/ui/src/components/pass-code/pass-code.spec.tsx
@@ -0,0 +1,105 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { PassCode } from './pass-code.component.js';
+import { styles } from './pass-code.styles.js';
+
+const PASSCODE_DIGIT = 'Passcode digit';
+const PASSCODE_DIGIT_1 = `${PASSCODE_DIGIT} 1`;
+const PASSCODE_DIGIT_2 = `${PASSCODE_DIGIT} 2`;
+const PASSCODE_DIGIT_3 = `${PASSCODE_DIGIT} 3`;
+const PASSCODE_DIGIT_4 = `${PASSCODE_DIGIT} 4`;
+
+describe('PassCode', () => {
+  const user = userEvent.setup();
+
+  it('renders the component', () => {
+    const { container } = render(
+      <PassCode
+        length={4}
+        onComplete={(passcode: string) => {
+          throw new Error('Function not implemented.');
+        }}
+      />,
+    );
+    expect(container).toBeInTheDocument();
+  });
+  it('renders the style correctly', () => {
+    const style = styles();
+
+    expect(style.base()).toBe('flex gap-2');
+    expect(style.input()).toBe('w-6 px-0 text-center');
+  });
+
+  it('triggers the onComplete correctly', async () => {
+    const onCompleteMock = vi.fn();
+    const { container, getByLabelText } = render(<PassCode length={4} onComplete={onCompleteMock} />);
+
+    // Ensure the correct number of input elements are rendered
+    const inputElements = container.querySelectorAll('input');
+    expect(inputElements.length).toBe(4);
+
+    // Simulate user input
+    await act(() => user.type(getByLabelText(PASSCODE_DIGIT_1), '1'));
+    await act(() => user.type(getByLabelText(PASSCODE_DIGIT_2), '2'));
+    await act(() => user.type(getByLabelText(PASSCODE_DIGIT_3), '3'));
+    await act(() => user.type(getByLabelText(PASSCODE_DIGIT_4), '4'));
+
+    // Ensure the onComplete callback is called with the correct passcode
+    expect(onCompleteMock).toHaveBeenCalledWith('1234');
+  });
+
+  it('handles backspace correctly', async () => {
+    const onCompleteMock = vi.fn();
+    const { getByLabelText } = render(<PassCode length={4} onComplete={onCompleteMock} />);
+
+    // Simulate user input
+    await act(() => user.type(getByLabelText(PASSCODE_DIGIT_1), '1'));
+    await act(() => user.type(getByLabelText(PASSCODE_DIGIT_2), '2'));
+    await act(() => user.type(getByLabelText(PASSCODE_DIGIT_3), '3'));
+    await act(() => user.type(getByLabelText(PASSCODE_DIGIT_4), '4'));
+
+    // Simulate backspace
+    fireEvent.keyDown(getByLabelText(PASSCODE_DIGIT_4), { key: 'Backspace' });
+
+    expect(screen.getByLabelText<HTMLInputElement>(PASSCODE_DIGIT_4).value).toBe('');
+
+    // Ensure focus moves to the previous input
+    expect(document.activeElement).toBe(getByLabelText(PASSCODE_DIGIT_3));
+  });
+
+  it('handles paste correctly', () => {
+    const onCompleteMock = vi.fn();
+    const { getByLabelText } = render(<PassCode length={4} onComplete={onCompleteMock} />);
+
+    // Simulate pasting
+    fireEvent.paste(getByLabelText(PASSCODE_DIGIT_1), {
+      clipboardData: {
+        getData: () => '5678',
+      },
+    });
+
+    // Ensure the onComplete callback is called with the correct passcode
+    expect(onCompleteMock).toHaveBeenCalledWith('5678');
+
+    // Ensure all input values are updated correctly
+    expect(screen.getByLabelText<HTMLInputElement>(PASSCODE_DIGIT_1).value).toBe('5');
+    expect(screen.getByLabelText<HTMLInputElement>(PASSCODE_DIGIT_2).value).toBe('6');
+    expect(screen.getByLabelText<HTMLInputElement>(PASSCODE_DIGIT_3).value).toBe('7');
+    expect(screen.getByLabelText<HTMLInputElement>(PASSCODE_DIGIT_4).value).toBe('8');
+  });
+
+  it('selects entire text on focus', async () => {
+    const onCompleteMock = vi.fn();
+    const { getByLabelText } = render(<PassCode length={4} onComplete={onCompleteMock} />);
+
+    // Simulate focus on an input
+    await act(() => user.type(getByLabelText(PASSCODE_DIGIT_1), '1'));
+    await act(() => user.type(getByLabelText(PASSCODE_DIGIT_2), '2'));
+    fireEvent.focus(getByLabelText(PASSCODE_DIGIT_2));
+
+    // Ensure the entire text is selected
+    expect(screen.getByLabelText<HTMLInputElement>(PASSCODE_DIGIT_2).selectionStart).toBe(0);
+    expect(screen.getByLabelText<HTMLInputElement>(PASSCODE_DIGIT_2).selectionEnd).toBe(1);
+  });
+});
diff --git a/packages/ui/src/components/pass-code/pass-code.stories.tsx b/packages/ui/src/components/pass-code/pass-code.stories.tsx
new file mode 100644
index 000000000..a2f16d01e
--- /dev/null
+++ b/packages/ui/src/components/pass-code/pass-code.stories.tsx
@@ -0,0 +1,59 @@
+/* eslint-disable no-console */
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Button, Link } from '../index.js';
+
+import { PassCode } from './pass-code.component.js';
+
+const meta: Meta<typeof PassCode> = {
+  title: 'Components/PassCode',
+  component: PassCode,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    length: 4,
+  },
+};
+
+/**
+ * > SMS usage example
+ */
+export const SMSStory = () => {
+  return (
+    <div className="flex flex-col items-center">
+      <h3 className="typography-body-5 mb-3 font-bold">Enter SMS code</h3>
+      <p className="mb-4">
+        Send to mobile ending ...XXXX{' '}
+        <Link
+          type="inline"
+          className="cursor-pointer"
+          onPress={() => {
+            console.log('update');
+          }}
+        >
+          update
+        </Link>
+      </p>
+      <PassCode
+        className="mb-3"
+        length={6}
+        onComplete={(passcode: string) => {
+          console.log('passcode', passcode);
+        }}
+      />
+      <Button look="link">Resend code</Button>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/pass-code/pass-code.styles.ts b/packages/ui/src/components/pass-code/pass-code.styles.ts
new file mode 100644
index 000000000..7499f3841
--- /dev/null
+++ b/packages/ui/src/components/pass-code/pass-code.styles.ts
@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    base: 'flex gap-2',
+    input: 'w-6 px-0 text-center',
+  },
+});
diff --git a/packages/ui/src/components/pass-code/pass-code.types.ts b/packages/ui/src/components/pass-code/pass-code.types.ts
new file mode 100644
index 000000000..422e831ed
--- /dev/null
+++ b/packages/ui/src/components/pass-code/pass-code.types.ts
@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './pass-code.styles.js';
+
+export type PassCodeProps = {
+  length: number;
+  onComplete: (passcode: string) => void;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;
diff --git a/packages/ui/src/tailwind/tailwind-plugin.ts b/packages/ui/src/tailwind/tailwind-plugin.ts
index 402bdfd80..d22ad4661 100644
--- a/packages/ui/src/tailwind/tailwind-plugin.ts
+++ b/packages/ui/src/tailwind/tailwind-plugin.ts
@@ -7,6 +7,7 @@ import { THEMES } from './themes/index.js';
 import { theme as WBCTheme } from './themes/wbc.js';
 import { type PluginOptions } from './types/tailwind.types.js';
 import { generateDatePicker } from './utils/generate-date-picker-component.js';
+import { generateLinearLoader } from './utils/generate-linear-loader.js';
 import {
   createBrandFonts,
   createFontSizes,
@@ -49,6 +50,7 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
       /**
        * Components
        */
+      addComponents(generateLinearLoader());
       addComponents(generateFontComponents(theme('typographySizes'), theme));
       addComponents(generateFormControlComponents(theme('formControl')));
       addComponents(generateDatePicker());
@@ -90,6 +92,14 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
           },
           fontSize: createFontSizes(FONT_TYPES),
           keyframes: {
+            waveLines: {
+              '0%': {
+                transform: 'translateX(-100%)',
+              },
+              '100%': {
+                transform: 'translateX(100%)',
+              },
+            },
             fadeIn: {
               '0%': { opacity: '0' },
               '100%': { opacity: '1' },
@@ -109,6 +119,7 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
             },
           },
           animation: {
+            skeleton: 'waveLines 2s infinite ease-out',
             fadeIn: 'fadeIn 0.2s ease',
             fadeInDown: 'fadeInDown 0.4s ease',
             maxHeightIn: 'maxHeightIn 0.4s ease',
diff --git a/packages/ui/src/tailwind/utils/generate-linear-loader.ts b/packages/ui/src/tailwind/utils/generate-linear-loader.ts
new file mode 100644
index 000000000..8931b1e6f
--- /dev/null
+++ b/packages/ui/src/tailwind/utils/generate-linear-loader.ts
@@ -0,0 +1,17 @@
+export const generateLinearLoader = () => {
+  return {
+    '.linear-gradient-style': {
+      '@apply overflow-hidden flex bg-background': {},
+      '&::before': {
+        '@apply translate-x-0 block w-full h-full animate-skeleton': {},
+        content: '""',
+        background: `linear-gradient(
+          to right,
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0.7) 50%,
+          rgba(255, 255, 255, 0) 100%
+        );`,
+      },
+    },
+  };
+};