diff --git a/src/nationalarchives/stories/development/about.mdx b/src/nationalarchives/stories/development/about.mdx
deleted file mode 100644
index 21f49ee3..00000000
--- a/src/nationalarchives/stories/development/about.mdx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Development/About" />
-
-# Project history
-
-## Needs
-
-TNA needed a frontend toolkit that was:
-
-- standardised - a single source of truth for all TNA that follows all our coding standards (currently non-existent)
-- version controlled - as well as [semantically versioned](https://semver.org/) with a [changelog](https://keepachangelog.com/en/1.0.0/)
-- open - all source code should be [open and available to anyone](https://www.gov.uk/service-manual/service-standard/point-12-make-new-source-code-open)
-- accessible - all components meet WCAG 2.1 AA standards
-- progressively enhanced - all components should still be operable without JavaScript, CSS or both
-- importable into projects (via a service such as [NPM](https://www.npmjs.com/search?q=nationalarchives)) - to make dependency management as simple as possible
-- agnostic - the implementation for the markup of the components can be replicated in any required technology (because we have Python, PHP and Java applications throughout the organisation)
-- testable - both from an internal perspective as well as providing scenarios and expected results for language implementations to be able to validate against
-- lean - minimal reliance on other languages and dependencies to ensure good extendability and speed of development and deployment
-- automatically published - leveraging CI/CD, creating a new release version should be as simple as possible
-
-It would have also been nice to have a toolkit that was:
-
-- extendable - rather than providing a static snapshot of the toolkit, we should always be able to extend it for any given application
-- documentable - not just from a technical perspective but also from a user-centred design perspective with best practices of when and how to use each component (this might be a separate project where we can [share information such as user research](https://www.gov.uk/service-manual/service-standard/point-13-use-common-standards-components-patterns))
-- prototype-able - by using Nunjucks, we could easily create a toolkit that integrated with the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk/docs/) which means we could very easily create high fidelity prototypes to test with, ultimately helping with user research
-
-## Current solutions
-
-There was already a solution in [nationalarchives/tdr-components](https://github.com/nationalarchives/tdr-components) which is specific to TDR and extends the GOV.UK components and styles. We needed to create a more generic set of components that were suitable for every TNA service, ~~while still extending the GOV.UK components and styles~~ *[Edit: this was not implemented]* but with a more TNA-branded look and feel.
-
-We also had [nationalarchives/tna-frontend-design-toolkit](https://github.com/nationalarchives/tna-frontend-design-toolkit) which aimed to provide similar functionality but wasn't as featureful as we needed and wasn't published to NPM which means it has to be [copied into the projects that require it](https://github.com/nationalarchives/ds-wagtail/tree/develop/sass/tna-toolkit).
-
-## Proposed solution
-
-This repository should hold all the JavaScript and SCSS source files required for all the frontend styles along with tests and expected markup.
-
-### Output
-
-The source files will be compiled down to a NodeJS package and deployed to [NPM](https://www.npmjs.com/). The package will contain:
-
-- All the JavaScript and SCSS source files which can be imported into a projects source code and compiled by the project (which will allow for tree shaking and application-specific modifications)
-- An AMD/UMD/IIFE (TBD) ES5 JavaScript file which can be included with a normal `<script>` element
-- A single CSS file containing all the styles which can be included with a normal `<style>` element
-- The Nunjucks templates for each component that might be required in other projects such as prototyping tools (other implementations can be made such as [Jinja templates](https://github.com/nationalarchives/tna-frontend-jinja))
-
-### Component resources
-
-Each component in this repository should contain:
-
-- Nunjucks template - only used to display the component within the examples page and aid development
-- SCSS - which could either be imported as a standalone styles declaration or as part of the compiled output
-- JavaScript (ESNext) - if there is any progressive enhancement required on the component
-- Options/properties - a list of the configurable properties of the component and their types
-- Test scenarios - a variety of configurations and their expected outputs that can be used by either this repository or other implementations of the components (e.g. Jinja)
-
-### Technologies
-
-- SCSS (used by GDS, is the de facto standard CSS preprocessor, already using in ETNA)
-- Webpack - compilation of JavaScript and CSS (used by numerous TNA projects already)
-- Babel - will allow us to use ESNext or possibly even TypeScript (although this could go against the lean requirement)
-- Storybook - allow viewing and testing of components (we have already used this elsewhere in TNA)
-
-#### Storybook
-
-Most widely supported open source frontend workshop for building UI components, constantly updated, also used by TDR
-
-#### ESNext JavaScript (not TypeScript)
-
-JavaScript over TypeScript to allow in-project compilation and possible tree-shaking without extra libraries
-
-#### Babel
-
-De facto JavaScript compiler and transpiler, allows us to use most up-to-date JavaScript for increased efficiency and cleaner source code
-
-#### SCSS
-
-Most mature CSS preprocessor, used in other TNA projects, huge support
-
-#### BEM
-
-Agreed CSS methodology within TNA
-
-#### Webpack
-
-Already used in many TNA projects, most mature offering although arguably not the fastest - we could consider changing in the future
-
-#### Nunjucks
-
-Used by GDS and made by Mozilla, Nunjucks is simple and expandable and allows us to use components in the GOV.UK prototype kit
-
-#### npm
-
-Used by many TNA projects and provides highly available package repository, de facto standard for JavaScript packages
-
-#### GitHub actions
-
-Free actions not relying on external services, used on some TNA projects but will allow us to have more of a CI/CD methodology
-
-#### Prettier
-
-Opinionated code formatter for (S)CSS, JavaScript, JSON and other file types, intended to reduce bikeshedding
-
-#### ESLint
-
-De facto linter for JavaScript to catch potential issues
-
-#### Stylelint
-
-Most widely supported and mature (S)CSS linter
-
-#### Jest
-
-Lightweight and fast testing library, support for Storybook, easy learning curve
-
-#### NVM
-
-Ensures all developers can work on the same version of NodeJS, reduces differences between development environments
-
-#### Chromatic.com
-
-Suggested by Storybook for visual regression testing
diff --git a/src/nationalarchives/stories/development/contributing.mdx b/src/nationalarchives/stories/development/contributing.mdx
deleted file mode 100644
index 340a8d62..00000000
--- a/src/nationalarchives/stories/development/contributing.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Development/Contributing" />
-
-# Contributing to the frontend styles
-
-## Adding a new component
-
-1. Create a new directory in `src/nationalarchives/components`
-1. Create an `_index.scss`, `[myComponent].scss`, `fixtures.json`, `macro-options.json`, `macro.njk`, `template.njk` and a `[myComponent].stories.js` in the directory using other components as a guide
-1. Add the component SCSS to `src/nationalarchives/components/_all.scss`
-1. Update `tasks/test-package.js` to check for the files as part of the CI - `...componentFiles("myComponent")`
-1. Set the macro in `macro.njk` to be `tnaMyComponent` where "MyComponent" is the name of your component
-1. Add the component import and macro to the prototype kit test in `.github/workflows/ci.yml`
-
-### Files
-
-- `_index.scss` - Simply includes `@use "myComponent";` so we can include this directory within SASS and have it reference the styles in `[myComponent].scss`
-- `[myComponent].scss` - this file gets built as a standalone file as well as being included in all styles and is where you can add your [BEM](https://getbem.com/) SCSS styles for the component
-- `fixtures.json` - these are snapshots of the rendered component's HTML in different scenarios which can be used by other implementations to test against
-- `macro-options.json` - the options for the component which are rendered in the Design System as well as being copied in to the Storybook controls
-- `macro.njk` - the Nunjucks macro easily allows us to include components in the prototype kit and other applications such as the Design System
-- `template.njk` - this is the HTML for the component, written in [Nunjucks](https://mozilla.github.io/nunjucks/)
-- `[myComponent].stories.js` - the stories that get rendered to Storybook
-
-### If you need JavaScript
-
-1. Create a `[myComponent].mjs` file in the component directory
-1. Ensure the top level element in your component has the attribute `data-module="tna-my-component"`
-1. Import and initialise your component as part of the `initAll` function in `src/nationalarchives/all.mjs`
-1. Update the check in `tasks/test-package.js` to add the JavaScript class to check for
-1. If your component uses JavaScript, ensure you add interaction tests using `@storybook/testing-library`
diff --git a/src/nationalarchives/stories/development/cookies.mdx b/src/nationalarchives/stories/development/cookies.mdx
deleted file mode 100644
index 17e866c8..00000000
--- a/src/nationalarchives/stories/development/cookies.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Meta } from "@storybook/blocks";
-import { Mermaid } from 'mdx-mermaid/Mermaid';
-
-<Meta title="Development/Cookies" />
-
-# Cookies handling
-
-The principles of cookie handling are:
-
-- Create cookies on the client side (apart from session cookies)
-- Update cookies on the client side (apart from session cookies)
-- Reject by default (don't assume acceptance and don't add tracking until after they agree)
-
-## Policies
-
-As standard we should use at least these three classes of cookies:
-
-- `essential` - we don't need to ask permission for these
-- `usage` - analytics, tracking, data gathering
-- `settings` - configured options for the site (e.g. default results view or static light/dark mode)
-
-## Process
-
-### First visit
-
-<Mermaid chart={`sequenceDiagram
-    User->>Browser: Request page
-    Browser->>Server: HTTP request with no cookies
-    Server->>Browser: Rendered HTML with cookie banner and no analytics
-    Browser->>User: Accept cookies?
-    alt Accept
-        User->>Browser: Accept cookies
-        Browser->>Browser: Create cookie policy with all accepted
-        Browser->>Browser: Add analytics code with JavaScript
-    else Reject
-        User->>Browser: Reject cookies
-        Browser->>Browser: Create cookie policy with all rejected
-    end
-    opt Next request
-        User->>Browser: Request page
-        Browser->>Server: HTTP request with cookie policy
-        Server->>Browser: Rendered HTML with analytics but no cookie banner
-    end
-`} />
-
-### Repeat visit
-
-<Mermaid chart={`sequenceDiagram
-    User->>Browser: Request page
-    Browser->>Server: HTTP request with cookie policy
-    Server->>Browser: Rendered HTML with analytics but no cookie banner
-`} />
-
-## Cookie library
-
-When you load in the tna-frontend JavaScript, it comes with a [cookie library](https://github.com/nationalarchives/tna-frontend/blob/main/src/nationalarchives/lib/cookies.mjs).
-
-This is loaded into the `window` object as `TNAFrontend.Cookies`:
-
-```JavaScript
-// Initialise a new Cookie instance
-const cookies = new TNAFrontend.Cookies();
-
-// Log all the cookies to the console
-console.log(cookies.all);
-```
-
-### Functions
-
-- `cookies.all` - Returns all the cookies
-- `cookies.exists(key)` - Returns `true` if a cookie exists with the name `key`
-- `cookies.hasValue(key, value)` - Returns `true` if the cookie with the name `key` is equal to `value`
-- `cookies.get(key)` - Returns the cookie with the name `key`
-- `cookies.set(key, value, maxAge, path)` - Set a cookie (max age default is one year, default path is `/`)
-- `cookies.delete(key)` - Deletes the cookie with the name `key`
-- `cookies.allPolicies` - Returns all the cookie policies
-- `cookies.acceptPolicy(policy)` - Accepts the policy with the name `policy`
-- `cookies.rejectPolicy(policy)` - Rejects the policy with the name `policy`
-- `cookies.setPolicy(policy, accepted)` - Accepts or rejects the policy with the name `policy` depending on the value of `accepted`
-- `cookies.acceptAllPolicies()` - Accepts all policies
-- `cookies.rejectAllPolicies()` - Rejects all policies
-- `cookies.isPolicyAccepted(policy)` - Returns `true` or `false` depending on whether the policy has been accepted
diff --git a/src/nationalarchives/stories/development/publishing.mdx b/src/nationalarchives/stories/development/publishing.mdx
deleted file mode 100644
index 5c8e3084..00000000
--- a/src/nationalarchives/stories/development/publishing.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Development/Publishing" />
-
-# Publishing a new version
-
-1. Update `version` in `package.json` using [SemVer](https://semver.org/)
-1. Update the CHANGELOG
-1. Run `nvm use` to ensure the correct Node version is used
-1. Run `npm install` to update the `package-lock.json`
-1. Merge all changes to `main` via a pull request
-1. Wait for the CI to pass
-1. Create a [new release on GitHub](https://github.com/nationalarchives/tna-frontend/releases/new) and add a new tag in the format `v1.0.0` (ensure leading `v` and change version number as necessary)
-
-Once a release is created, the [publish pipeline](https://github.com/nationalarchives/tna-frontend/blob/main/.github/workflows/npm-publish.yml) will be triggered.
diff --git a/src/nationalarchives/stories/development/structure.mdx b/src/nationalarchives/stories/development/structure.mdx
deleted file mode 100644
index 33bde5f9..00000000
--- a/src/nationalarchives/stories/development/structure.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Development/Structure" />
-
-# Structure
-
-The layers of the TNA frontend SCSS library is built as:
-
-1. [Variables](#variables)
-1. [Tools](#tools)
-1. [Libraries](#libraries)/[Utilities](#utilities)
-1. [Components](#components)
-1. [Overrides](#overrides)
-
-## Variables
-
-TNA frontend variables are defined in `src/nationalarchives/variables`.
-
-Lots of variables can be modified but some are fixed, such as our brand colours.
-
-An example fixed variable is `$relative-1rem-px` where we set the value of `1rem` to `16px` which makes it easier to define widths as a function of `1rem` as we mostly work on a 4px grid:
-
-| Pixels | REM         |
-| ------ | ----------- |
-| `1px`  | `0.0625rem` |
-| `2px`  | `0.125rem`  |
-| `4px`  | `0.25rem`   |
-| `8px`  | `0.5rem`    |
-| `16px` | `1rem`      |
-| `32px` | `2rem`      |
-| `64px` | `4rem`      |
-
-An example of a variable that can be modified is `$body-font-size-px` which we set to `18px` by default. This font size might not be right for all services so we have allowed it to be modified.
-
-## Tools
-
-The tools provided are reusable `@mixin` and `@function` blocks to make writing styles easier. They are defined in `src/nationalarchives/tools`.
-
-Tools rely directly on variables and can be used throughout the frontend library.
-
-As an exmaple, `colour-font()` will apply a font colour in a way that should work for all browsers and takes into consideration the light/dark theme used.
-
-## Libraries
-
-The libraries in `src/nationalarchives/lib` are a mix of third party libraries as well as some TNA ones.
-
-They can join up tools to make larger, more useful elements.
-
-## Utilities
-
-The utilities in `src/nationalarchives/utilities` are some global styles that aren't associated with a specific component.
-
-This layer is where we define some general purpose elements such as:
-
-- The `tna-template` and `tna-template__body` elements
-- Headings
-- Lists
-- Chips
-- `<p>` elements
-- General media elements like `<img>`, `<svg>`, `<picture>`, `<video>` and `<canvas>`
-- Columns
-- General form elements
-
-These elements all still adhere to the [BEM methodology](https://getbem.com/).
-
-Utilities should not implement any `!important` rules.
-
-## Components
-
-The most prominent layer of styling, the components in `src/nationalarchives/components` should use the tools already defined.
-
-Components shouldn't use variables directly. They shouldn't use static values for colour unless the colour of that component will never change, for example the message component which is always yellow.
-
-Some components may use utilities such as headings. Where these styles have already been defined, they should not be redefined. The heading in a cookie banner should use the existing `tna-heading` and `tna-heading--m` styles that already exist rather than implimenting its own.
-
-Components should not implement any `!important` rules. There are exceptions such as the skip link that needs to be visually hidden in a way that it is still available for someone navigating a site with a keyboard.
-
-Components should not care about the context or layout within which they are used. As an example, a breadcrumb *could* be placed within a card or a footer element although in reality we wouldn't allow this.
-
-## Overrides
-
-Overrides start with `tna-!--` and can only be used in HTML classes. They have `!important` rules.
-
-Examples of overrides are:
-
-- Spacing (margin, padding etc.)
-- No focus style (`.tna-!--no-focus-style`) for items such as the target element of a skip link
-- Visibly hidden content (used to add extra descriptions which appear for screenreaders only)
diff --git a/src/nationalarchives/stories/development/using/compiled.mdx b/src/nationalarchives/stories/development/using/compiled.mdx
deleted file mode 100644
index b5628fa5..00000000
--- a/src/nationalarchives/stories/development/using/compiled.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Development/Using/Compiled" />
-
-# Using the compiled files
-
-Each release (as of `v0.1.21-prerelease`) should contain a ZIP of the package.
-
-Find the release you want on the `tna-frontend` [releases page](https://github.com/nationalarchives/tna-frontend/releases) and download the package from the "Assets" dropdown.
diff --git a/src/nationalarchives/stories/development/using/hosted.mdx b/src/nationalarchives/stories/development/using/hosted.mdx
deleted file mode 100644
index 287497b7..00000000
--- a/src/nationalarchives/stories/development/using/hosted.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Development/Using/Hosted" />
-
-# Using with a hosted solution
-
-The `@nationalarchives/frontend` package is available on [jsdelivr.com](https://www.jsdelivr.com/package/npm/@nationalarchives/frontend).
-
-While you can use the CSS and JavaScript from there, the font files which includes the icon font will have to be hosted from your web application.
-
-As a result, **using a hosted solution is not the preferred method for using the `tna-frontend` library**.
-
-## All components and styles
-
-Include the CSS in the `<head>` element of your page:
-
-```html
-<link href="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.css" rel="stylesheet" integrity="sha384-6Egfw6aX1Jrwuf+APn+BMPswroudkIQ6StU095OPkNCKLEzj7ksWGmYxjend8P7g" crossorigin="anonymous">
-```
-
-### JavaScript
-
-Add the JavaScript to the end of your page just before your closing `</body>` tag:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.js" integrity="sha384-sBkiMlxl9svXopGxNSMVAdALjzyvh6sQHp+21PE3LGfTxAEbG4EIpK" crossorigin="anonymous"></script>
-<script>
-  // Initialise all TNA components
-  window.TNAFrontend.initAll();
-</script>
-```
-
-...or use the module syntax:
-
-```
-<script type="module">
-  import { initAll } from "https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.js";
-  initAll();
-</script>
-```
-
-## Specific components
-
-```html
-<link href="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/components/tabs.css" rel="stylesheet" integrity="sha384-hkx4svJn1A7pWYlzaDRMmtIBBijZdEop+M1Y/H4Hdg8aAqZRJHG56RokLk/eqJYl" crossorigin="anonymous">
-```
-
-### JavaScript
-
-```html
-<!-- JavaScript for a single component -->
-<script src="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/components/tabs.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-```
diff --git a/src/nationalarchives/stories/development/using/npm.mdx b/src/nationalarchives/stories/development/using/npm.mdx
deleted file mode 100644
index c8cede5a..00000000
--- a/src/nationalarchives/stories/development/using/npm.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Development/Using/NPM" />
-
-# Using with npm
-
-Install the frontend package from NPM with:
-
-```sh
-npm install @nationalarchives/frontend
-```
-
-## CSS
-
-From here, you have access to include the SCSS files from the package so you can compile the package yourself:
-
-```css
-// OPTIONAL: Override any variables
-@use "node_modules/@nationalarchives/frontend/nationalarchives/variables/assets" with (
-  $tna-font-path: "/MY_CUSTOM_FONTS_PATH",
-  $fa-font-path: "/MY_CUSTOM_FONT_AWESOME_PATH"
-);
-@use "node_modules/@nationalarchives/frontend/nationalarchives/variables/grid" with (
-  $largest-container-width: 1337px
-);
-@use "node_modules/@nationalarchives/frontend/nationalarchives/variables/typography" with (
-  $body-font-size-px: 17
-);
-
-// Include all the styles
-@use "node_modules/@nationalarchives/frontend/nationalarchives/all";
-
-// ...or just include a single component
-@use "node_modules/@nationalarchives/frontend/nationalarchives/components/tabs";
-```
-
-...or you can copy any of the compiled CSS files into your distribution:
-
-- `node_modules/@nationalarchives/frontend/nationalarchives/all.css`
-- `node_modules/@nationalarchives/frontend/nationalarchives/all.css.map`
-- `node_modules/@nationalarchives/frontend/nationalarchives/components/tabs.css`
-- `node_modules/@nationalarchives/frontend/nationalarchives/components/tabs.css.map`
-
-## JavaScript
-
-```JavaScript
-// Import all the JavaScript
-import "node_modules/@nationalarchives/frontend/nationalarchives/all.mjs";
-
-// ...or import just the JavaScript for a single component
-import "node_modules/@nationalarchives/frontend/nationalarchives/components/tabs/tabs.mjs";
-```
-
-...or you can copy any of the compiled JavaScript files into your distribution:
-
-- `node_modules/@nationalarchives/frontend/nationalarchives/all.js`
-- `node_modules/@nationalarchives/frontend/nationalarchives/all.js.map`
-- `node_modules/@nationalarchives/frontend/nationalarchives/components/tabs.js`
-- `node_modules/@nationalarchives/frontend/nationalarchives/components/tabs.js.map`
diff --git a/src/nationalarchives/stories/utilities/lists/lists.mdx b/src/nationalarchives/stories/utilities/lists/lists.mdx
new file mode 100644
index 00000000..bda680b3
--- /dev/null
+++ b/src/nationalarchives/stories/utilities/lists/lists.mdx
@@ -0,0 +1,18 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as ListStories from './lists.stories';
+
+<Meta of={ListStories} />
+
+# Lists
+
+<Canvas of={ListStories.UnorderedList} />
+<Canvas of={ListStories.OrderedList} />
+<Canvas of={ListStories.DescriptionList} />
+<Canvas of={ListStories.DescriptionListWithIcons} />
+
+## Plain versions
+
+<Canvas of={ListStories.UnorderedListPlain} />
+<Canvas of={ListStories.OrderedListPlain} />
+<Canvas of={ListStories.PlainDescriptionList} />
+<Canvas of={ListStories.PlainDescriptionListWithIcons} />
diff --git a/src/nationalarchives/stories/utilities/typography/lists.stories.js b/src/nationalarchives/stories/utilities/lists/lists.stories.js
similarity index 99%
rename from src/nationalarchives/stories/utilities/typography/lists.stories.js
rename to src/nationalarchives/stories/utilities/lists/lists.stories.js
index 72b59ef2..3a90f424 100644
--- a/src/nationalarchives/stories/utilities/typography/lists.stories.js
+++ b/src/nationalarchives/stories/utilities/lists/lists.stories.js
@@ -4,7 +4,7 @@ const argTypes = {
 };
 
 export default {
-  title: "Utilities/Typography",
+  title: "Utilities/Lists",
   argTypes,
 };
 
diff --git a/src/nationalarchives/stories/utilities/typography/typography.mdx b/src/nationalarchives/stories/utilities/typography/typography.mdx
index 0db0a5f6..6408ffc8 100644
--- a/src/nationalarchives/stories/utilities/typography/typography.mdx
+++ b/src/nationalarchives/stories/utilities/typography/typography.mdx
@@ -2,14 +2,11 @@ import { Meta, Canvas } from "@storybook/blocks";
 import * as HeadingStories from './headings.stories';
 import * as HeadingGroupStories from './heading-groups.stories';
 import * as TypographyStories from './typography.stories';
-import * as ListStories from './lists.stories';
 
 <Meta of={TypographyStories} />
 
 # Typography
 
-We use a set of typefaces...
-
 ## Headings
 
 <Canvas of={HeadingStories.Headings} />
@@ -17,32 +14,13 @@ We use a set of typefaces...
 
 ## Heading groups
 
-Although visually identical, there are two types of header groups based on whether the group should be read as a single sentence or not.
-
-In the first example, the heading will be read by screen readers as `The story of Alice Hawkins.`
-
 <Canvas of={HeadingGroupStories.HeadingGroup} />
-
-In the second example, the heading will be read as two separate sentences; `Record revealed. The Monteagle Letter.`
-
 <Canvas of={HeadingGroupStories.HeadingGroupSeparated} />
 
 ## General typography
 
 <Canvas of={TypographyStories.Paragraph} />
-<Canvas of={TypographyStories.Blockquote} />
+<Canvas of={TypographyStories.LargeParagraph} />
 <Canvas of={TypographyStories.SceneSetter} />
-
-## Lists
-
-<Canvas of={ListStories.UnorderedList} />
-<Canvas of={ListStories.OrderedList} />
-<Canvas of={ListStories.DescriptionList} />
-<Canvas of={ListStories.DescriptionListWithIcons} />
-
-### Plain versions
-
-<Canvas of={ListStories.UnorderedListPlain} />
-<Canvas of={ListStories.OrderedListPlain} />
-<Canvas of={ListStories.PlainDescriptionList} />
-<Canvas of={ListStories.PlainDescriptionListWithIcons} />
+<Canvas of={TypographyStories.SceneSetterSmall} />
+<Canvas of={TypographyStories.Blockquote} />
diff --git a/src/nationalarchives/stories/utilities/typography/typography.stories.js b/src/nationalarchives/stories/utilities/typography/typography.stories.js
index e0b3247f..6843e69f 100644
--- a/src/nationalarchives/stories/utilities/typography/typography.stories.js
+++ b/src/nationalarchives/stories/utilities/typography/typography.stories.js
@@ -18,6 +18,17 @@ Paragraph.args = {
   ],
 };
 
+const LargeParagraphTemplate = ({ paragraphs }) =>
+  paragraphs
+    .map((paragraph) => `<p class="tna-large-paragraph">${paragraph}</p>`)
+    .join("");
+export const LargeParagraph = LargeParagraphTemplate.bind({});
+LargeParagraph.args = {
+  paragraphs: [
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh. Donec ac tellus in dui rutrum maximus. Aliquam vel euismod eros. Integer ut magna velit. Fusce sed dui sit amet metus eleifend dictum quis vitae mi. Aenean sagittis euismod purus, in accumsan metus venenatis nec. Nullam nec velit felis. Sed nec felis eu nisl varius dictum eu quis nisl. Donec dapibus est arcu, vel pellentesque risus pellentesque eget.",
+  ],
+};
+
 const HeadingLinkTemplate = ({ text, href }) =>
   `<h2 class="tna-heading-s">
     <a href="${href}">${text}</a>
@@ -37,6 +48,15 @@ SceneSetter.args = {
   text: `We are the official archive of England and Wales. Discover 1,000 years of history through <a href="#">fascinating stories</a> from the past or <a href="#">start your own research</a> and <a href="#">search our catalogue</a> of 32 million records. <a href="#">Plan a visit</a> to access original historic documents from our collections then enjoy the grounds, café, and <a href="#">free exhibitions</a>.`,
 };
 
+const SceneSetterSmallTemplate = ({ text }) =>
+  `<p class="tna-scene-setter tna-scene-setter--small">
+    ${text}
+  </p>`;
+export const SceneSetterSmall = SceneSetterSmallTemplate.bind({});
+SceneSetterSmall.args = {
+  text: `We are the official archive of England and Wales. Discover 1,000 years of history through <a href="#">fascinating stories</a> from the past or <a href="#">start your own research</a> and <a href="#">search our catalogue</a> of 32 million records. <a href="#">Plan a visit</a> to access original historic documents from our collections then enjoy the grounds, café, and <a href="#">free exhibitions</a>.`,
+};
+
 const TextDetailsTemplate = () =>
   `<p>
     Typed slip with photographs - 'The <span class="tna-detail" title="Italian (miscellaneous)" data-type="misc">Italian</span> Steamer <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> which ran on the rocks near <span class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</span> a few days ago is now a total wreck. After a severe buffeting by heavy seas the ship has broken in two. The photograph shows the <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> broken in two by a severe buffeting from the seas near <a href="#" class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</a>.
diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
index a597e7d1..7c118585 100644
--- a/src/nationalarchives/utilities/_typography.scss
+++ b/src/nationalarchives/utilities/_typography.scss
@@ -407,7 +407,7 @@ a.tna-chip {
 .tna-large-paragraph {
   @include spacing.space-above;
 
-  @include typography.relative-font-size(20);
+  @include typography.relative-font-size(22);
 }
 
 .tna-scene-setter {
@@ -431,4 +431,8 @@ a.tna-chip {
       text-decoration-thickness: 4.5px;
     }
   }
+
+  &--small {
+    @include typography.relative-font-size(24);
+  }
 }