From 595868204a1f87270d303e7e7265becfef57cbcf Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Thu, 6 Jul 2023 13:54:41 +0100
Subject: [PATCH] chore: Update font sizes to linear numbers

---
 .../src/@planx/components/Confirmation/Public.tsx  |  8 +++++---
 .../components/FileUploadAndLabel/Public.tsx       |  4 ++--
 .../src/@planx/components/Notice/Public.tsx        |  4 +---
 .../src/@planx/components/Pay/Public/Confirm.tsx   |  8 ++++----
 .../components/Pay/Public/InviteToPayForm.tsx      |  6 ++----
 .../@planx/components/PlanningConstraints/List.tsx |  2 +-
 .../components/PlanningConstraints/Public.tsx      |  8 ++++----
 .../components/PropertyInformation/Public.tsx      |  2 +-
 .../src/@planx/components/Result/Editor.tsx        |  6 ++++--
 .../src/@planx/components/Result/Public/index.tsx  |  4 ++--
 .../src/@planx/components/Section/Public.tsx       |  2 +-
 .../components/shared/Preview/MoreInfoSection.tsx  |  2 +-
 .../components/shared/Preview/QuestionHeader.tsx   |  2 +-
 .../components/shared/Preview/SummaryList.tsx      |  2 +-
 editor.planx.uk/src/components/ErrorFallback.tsx   |  2 +-
 editor.planx.uk/src/components/Header.tsx          |  2 +-
 .../components/Settings/DataManagerSettings.tsx    |  2 +-
 .../components/Settings/DesignSettings.tsx         | 14 ++++++++++----
 .../components/Settings/ServiceFlags.tsx           |  2 +-
 .../components/Settings/ServiceSettings.tsx        |  8 +++++---
 .../components/Settings/TeamSettings.tsx           |  8 +++++---
 editor.planx.uk/src/pages/GlobalSettings.tsx       |  2 +-
 editor.planx.uk/src/pages/Pay/InviteToPay.tsx      |  4 ++--
 .../src/pages/Preview/ReconciliationPage.tsx       |  2 +-
 editor.planx.uk/src/pages/Team.tsx                 |  2 +-
 editor.planx.uk/src/pages/Teams.tsx                |  4 ++--
 editor.planx.uk/src/theme.ts                       | 10 +++++++---
 editor.planx.uk/src/ui/ExpandableList.tsx          |  2 +-
 editor.planx.uk/src/ui/NumberedList.tsx            |  2 +-
 editor.planx.uk/src/ui/Palette.stories.tsx         |  4 +++-
 30 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Confirmation/Public.tsx b/editor.planx.uk/src/@planx/components/Confirmation/Public.tsx
index f3771cb7dc..8ab494355f 100644
--- a/editor.planx.uk/src/@planx/components/Confirmation/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Confirmation/Public.tsx
@@ -91,10 +91,10 @@ export default function ConfirmationComponent(props: Props) {
 
         {props.nextSteps && Boolean(props.nextSteps?.length) && (
           <Box pt={3}>
-            <Typography variant="h3" component="h2" mb={2}>
+            <Typography variant="h2" mb={2}>
               What happens next?
             </Typography>
-            <NumberedList items={props.nextSteps} heading="h3" />
+            <NumberedList items={props.nextSteps} heading="h2" />
           </Box>
         )}
 
@@ -110,7 +110,9 @@ export default function ConfirmationComponent(props: Props) {
         {props.contactInfo && (
           <>
             <Box py={1} color="primary.main">
-              <Typography variant="h3">Contact us</Typography>
+              <Typography variant="h2" component="h3">
+                Contact us
+              </Typography>
               <ReactMarkdownOrHtml source={props.contactInfo} />
             </Box>
           </>
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
index e83022332e..659c80d42b 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
@@ -163,7 +163,7 @@ function Component(props: Props) {
                   padding: "1.5em 0 1em",
                 }}
               >
-                <Typography variant="h4" component="h2">
+                <Typography variant="h3" component="h2">
                   {`${capitalize(fileListCategory)} files`}
                 </Typography>
               </ListSubheader>,
@@ -181,7 +181,7 @@ function Component(props: Props) {
         </List>
       </DropzoneContainer>
       {Boolean(slots.length) && (
-        <Typography variant="h4" component="h3" mb={2}>
+        <Typography variant="h3" mb={2}>
           Your uploaded files
         </Typography>
       )}
diff --git a/editor.planx.uk/src/@planx/components/Notice/Public.tsx b/editor.planx.uk/src/@planx/components/Notice/Public.tsx
index 077f8a5025..11f7d95e4e 100644
--- a/editor.planx.uk/src/@planx/components/Notice/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Notice/Public.tsx
@@ -87,9 +87,7 @@ const NoticeComponent: React.FC<Props> = (props) => {
           <Content>
             <TitleWrap>
               <ErrorOutline sx={{ width: 34, height: 34 }} />
-              <Title component="h3" variant="h4">
-                {props.title}
-              </Title>
+              <Title variant="h3">{props.title}</Title>
             </TitleWrap>
             <Box mt={2}>
               <ReactMarkdownOrHtml
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
index d8557d5fc0..900b4f60a9 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
@@ -64,7 +64,7 @@ const PayBody: React.FC<PayBodyProps> = (props) => {
         <Card>
           <PayText>
             <Typography
-              variant="h3"
+              variant="h2"
               component={props.hideFeeBanner ? "h2" : "h3"}
             >
               {props.instructionsTitle || "How to pay"}
@@ -107,7 +107,7 @@ const PayBody: React.FC<PayBodyProps> = (props) => {
       ) : (
         <Card handleSubmit={props.onConfirm} isValid>
           <ErrorSummary role="status" data-testid="error-summary">
-            <Typography variant="h5" component="h3" gutterBottom>
+            <Typography variant="h4" component="h3" gutterBottom>
               {props.error}
             </Typography>
             <Typography variant="body2">
@@ -147,7 +147,7 @@ export default function Confirm(props: Props) {
     <Box textAlign="left" width="100%">
       <>
         <Container maxWidth="md">
-          <Typography variant="h3" component="h1" align="left" pb={3}>
+          <Typography variant="h2" component="h1" align="left" pb={3}>
             {page === "Pay" ? props.title : props.secondaryPageTitle}
           </Typography>
         </Container>
@@ -160,7 +160,7 @@ export default function Confirm(props: Props) {
           >
             <Container maxWidth="md">
               <Typography
-                variant="h4"
+                variant="h3"
                 gutterBottom
                 className="marginBottom"
                 component="h2"
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/InviteToPayForm.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/InviteToPayForm.tsx
index 02c5c29da2..64ffedb1a8 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/InviteToPayForm.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/InviteToPayForm.tsx
@@ -154,9 +154,7 @@ const InviteToPayForm: React.FC<InviteToPayFormProps> = ({
   ) : (
     <Card>
       <StyledForm onSubmit={formik.handleSubmit}>
-        <Typography variant="h3" component="h2">
-          {nomineeTitle}
-        </Typography>
+        <Typography variant="h2">{nomineeTitle}</Typography>
         {nomineeDescription && (
           <Typography variant="body2">
             <ReactMarkdownOrHtml
@@ -209,7 +207,7 @@ const InviteToPayForm: React.FC<InviteToPayFormProps> = ({
             }}
           />
         </InputLabel>
-        <Typography variant="h3" component="h2" pt={2}>
+        <Typography variant="h2" pt={2}>
           {yourDetailsTitle}
         </Typography>
         {yourDetailsDescription && (
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
index d33b004d1b..f4e09e8aa9 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
@@ -163,7 +163,7 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
         <Collapse in={showConstraintData}>
           <Box py={1.5} px={2}>
             <>
-              <Typography variant="h4" component="h4" gutterBottom>
+              <Typography variant="h3" component="h4" gutterBottom>
                 {`This property ${props?.content}`}
               </Typography>
               {Boolean(props.data?.length) && (
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx
index 1536849ed6..26f77a630e 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx
@@ -255,7 +255,7 @@ export function PlanningConstraintsContent(
       )}
       {positiveConstraints.length > 0 && (
         <>
-          <Typography variant="h4" component="h2" gutterBottom>
+          <Typography variant="h3" component="h2" gutterBottom>
             These are the planning constraints we think apply to this property
           </Typography>
           <ConstraintsList data={positiveConstraints} metadata={metadata} />
@@ -275,7 +275,7 @@ export function PlanningConstraintsContent(
       )}
       {positiveConstraints.length === 0 && negativeConstraints.length > 0 && (
         <>
-          <Typography variant="h4" component="h2">
+          <Typography variant="h3" component="h2">
             It looks like there are no constraints on this property
           </Typography>
           <Typography variant="body2">
@@ -319,7 +319,7 @@ interface ConstraintsFetchErrorProps {
 
 const ConstraintsFetchError = (props: ConstraintsFetchErrorProps) => (
   <ErrorSummaryContainer role="status" data-testid="error-summary-no-info">
-    <Typography variant="h5" component="h2" gutterBottom>
+    <Typography variant="h4" component="h2" gutterBottom>
       No information available
     </Typography>
     {props.error &&
@@ -353,7 +353,7 @@ const ConstraintsGraphError = (props: ConstraintsGraphErrorProps) => (
       role="status"
       data-testid="error-summary-invalid-graph"
     >
-      <Typography variant="h5" component="h2" gutterBottom>
+      <Typography variant="h4" component="h2" gutterBottom>
         Invalid graph
       </Typography>
       <Typography variant="body2">
diff --git a/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx b/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
index dc4d594392..e87ade03e0 100644
--- a/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
@@ -52,7 +52,7 @@ function Component(props: PublicProps<PropertyInformation>) {
         role="status"
         data-testid="error-summary-invalid-graph"
       >
-        <Typography variant="h5" component="h2" gutterBottom>
+        <Typography variant="h4" component="h2" gutterBottom>
           Invalid graph
         </Typography>
         <Typography variant="body2">
diff --git a/editor.planx.uk/src/@planx/components/Result/Editor.tsx b/editor.planx.uk/src/@planx/components/Result/Editor.tsx
index 679f79a4d8..aa369c8013 100644
--- a/editor.planx.uk/src/@planx/components/Result/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Result/Editor.tsx
@@ -97,7 +97,7 @@ const ResultComponent: React.FC<Result> = (props) => {
       <ModalSection>
         <ModalSectionContent title="Result" Icon={ICONS[TYPES.Result]}>
           <InputRow>
-            <Typography variant="h6">
+            <Typography variant="h5" component="h6">
               <label htmlFor="result-flagSet">Flag set</label>
             </Typography>
             <select
@@ -116,7 +116,9 @@ const ResultComponent: React.FC<Result> = (props) => {
           </InputRow>
 
           <Box mt={2}>
-            <Typography variant="h6">Flag Text Overrides (optional)</Typography>
+            <Typography variant="h5" component="h6">
+              Flag Text Overrides (optional)
+            </Typography>
             <Typography variant="body2">
               The overrides you set here will change what is displayed to the
               user upon arriving at this result. If you provide no overrides,
diff --git a/editor.planx.uk/src/@planx/components/Result/Public/index.tsx b/editor.planx.uk/src/@planx/components/Result/Public/index.tsx
index 51635ba803..d4e4a8f905 100644
--- a/editor.planx.uk/src/@planx/components/Result/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/Result/Public/index.tsx
@@ -131,7 +131,7 @@ const Result: React.FC<Props> = ({
         isValid
       >
         <Box mt={4} mb={3}>
-          <Typography variant="h3" component="h2" gutterBottom>
+          <Typography variant="h2" gutterBottom>
             {reasonsTitle}
           </Typography>
         </Box>
@@ -164,7 +164,7 @@ const Result: React.FC<Props> = ({
             <Box ml={1}>
               <Box display="flex" alignItems="center">
                 <DisclaimerHeading
-                  variant="h6"
+                  variant="h5"
                   component="h3"
                   color="text.primary"
                 >
diff --git a/editor.planx.uk/src/@planx/components/Section/Public.tsx b/editor.planx.uk/src/@planx/components/Section/Public.tsx
index 633e715d73..b05caf199e 100644
--- a/editor.planx.uk/src/@planx/components/Section/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Section/Public.tsx
@@ -43,7 +43,7 @@ export default function Component(props: Props) {
     <Card isValid handleSubmit={props.handleSubmit}>
       <QuestionHeader title={flowName} />
       <Box>
-        <Typography variant="h4" component="h2" pb="0.15em">
+        <Typography variant="h3" component="h2" pb="0.15em">
           Application incomplete.
         </Typography>
         <Typography variant="subtitle2" component="h3">
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfoSection.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfoSection.tsx
index 275d75b351..e4ad043609 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfoSection.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfoSection.tsx
@@ -23,7 +23,7 @@ const MoreInfoSection: React.FC<IMoreInfoSection> = ({ title, children }) => {
   return (
     <Root className="MoreInfoSection-root" pb={3}>
       {title && (
-        <Typography mb={4} variant="h3" component="h2">
+        <Typography mb={4} variant="h2">
           {title}
         </Typography>
       )}
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx
index 3dfc7e2dcb..c9294623ed 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx
@@ -62,7 +62,7 @@ const QuestionHeader: React.FC<IQuestionHeader> = ({
           {title && (
             <Box mr={1} pt={0.5}>
               <Typography
-                variant="h3"
+                variant="h2"
                 role="heading"
                 aria-level={1}
                 component="h1"
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
index 027f8c2533..635ea3f0df 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -160,7 +160,7 @@ function SummaryListsBySections(props: SummaryListsBySectionsProps) {
                 <Box sx={{ display: "flex", justifyContent: "space-between" }}>
                   <Typography
                     component={props.sectionComponent || "h2"}
-                    variant="h5"
+                    variant="h4"
                   >
                     {props.flow[`${Object.keys(sections[i])[0]}`]?.data?.title}
                   </Typography>
diff --git a/editor.planx.uk/src/components/ErrorFallback.tsx b/editor.planx.uk/src/components/ErrorFallback.tsx
index e6d50f8db6..68a85ff170 100644
--- a/editor.planx.uk/src/components/ErrorFallback.tsx
+++ b/editor.planx.uk/src/components/ErrorFallback.tsx
@@ -11,7 +11,7 @@ function ErrorFallback(props: { error: Error }) {
   return (
     <Card>
       <ErrorSummaryContainer role="alert">
-        <Typography variant="h5" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" gutterBottom>
           Something went wrong
         </Typography>
         <Typography>
diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
index 33a03edc24..10041c111b 100644
--- a/editor.planx.uk/src/components/Header.tsx
+++ b/editor.planx.uk/src/components/Header.tsx
@@ -362,7 +362,7 @@ const ServiceTitle: React.FC = () => {
 
   return (
     <ServiceTitleRoot data-testid="service-title">
-      <Typography component="span" variant="h5">
+      <Typography component="span" variant="h4">
         {flowName}
       </Typography>
     </ServiceTitleRoot>
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DataManagerSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DataManagerSettings.tsx
index 494aa78707..6cb1b1d5bf 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DataManagerSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DataManagerSettings.tsx
@@ -14,7 +14,7 @@ const DataManagerSettings = () => {
   return (
     <form onSubmit={formik.handleSubmit}>
       <Box pb={3}>
-        <Typography variant="h3" gutterBottom>
+        <Typography variant="h2" component="h3" gutterBottom>
           <strong>Data Manager</strong>
         </Typography>
         <Typography variant="body1">
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
index cebb9df1b9..d1510b1fc7 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
@@ -30,7 +30,9 @@ const TextInput: React.FC<{
     <Box mb={2} width="100%">
       <Box my={2} display="flex" alignItems="center">
         <Switch {...switchProps} color="primary" />
-        <Typography variant="h5">{title}</Typography>
+        <Typography variant="h4" component="h5">
+          {title}
+        </Typography>
       </Box>
       <Box mb={2}>
         {description && <Typography variant="body2">{description}</Typography>}
@@ -62,7 +64,7 @@ const DesignSettings: React.FC = () => {
   return (
     <form onSubmit={formik.handleSubmit}>
       <Box pb={3} borderBottom={1}>
-        <Typography variant="h3" gutterBottom>
+        <Typography variant="h2" component="h3" gutterBottom>
           <strong>Design</strong>
         </Typography>
         <Typography variant="body1">
@@ -83,7 +85,9 @@ const DesignSettings: React.FC = () => {
         <InputGroup>
           <InputRow>
             <InputRowLabel>
-              <Typography variant="h5">Background</Typography>
+              <Typography variant="h4" component="h5">
+                Background
+              </Typography>
             </InputRowLabel>
             <InputRowItem width="70%">
               <ColorPicker
@@ -95,7 +99,9 @@ const DesignSettings: React.FC = () => {
           </InputRow>
           <InputRow>
             <InputRowLabel>
-              <Typography variant="h5">Logo</Typography>
+              <Typography variant="h4" component="h5">
+                Logo
+              </Typography>
             </InputRowLabel>
             <InputRowItem width={50}>
               <PublicFileUploadButton />
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx
index a6e7673146..ab4f2435db 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx
@@ -90,7 +90,7 @@ const ServiceFlags: React.FC<IServiceFlags> = ({ flagSets }) => {
   return (
     <form onSubmit={formik.handleSubmit}>
       <Box pb={3} borderBottom={1}>
-        <Typography variant="h3" gutterBottom>
+        <Typography variant="h2" component="h3" gutterBottom>
           <strong>Service flags</strong>
         </Typography>
         <Typography variant="body1">
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index a06f9d40f1..6a4a9bde9e 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -32,7 +32,9 @@ const TextInput: React.FC<{
     <Box mb={2} width="100%">
       <Box my={2} display="flex" alignItems="center">
         <Switch {...switchProps} color="primary" />
-        <Typography variant="h5">{title}</Typography>
+        <Typography variant="h4" component="h5">
+          {title}
+        </Typography>
       </Box>
       <Box mb={2}>
         {description && <Typography variant="body2">{description}</Typography>}
@@ -97,7 +99,7 @@ const ServiceSettings: React.FC = () => {
   return (
     <form onSubmit={formik.handleSubmit}>
       <Box py={3} borderBottom={1}>
-        <Typography variant="h3" gutterBottom>
+        <Typography variant="h2" component="h3" gutterBottom>
           <strong>Elements</strong>
         </Typography>
         <Typography variant="body1">
@@ -126,7 +128,7 @@ const ServiceSettings: React.FC = () => {
         />
       </Box>
       <Box pt={2}>
-        <Typography variant="h4">
+        <Typography variant="h3" component="h4">
           <strong>Footer Links</strong>
         </Typography>
         <InputGroup>
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx
index d402e8dba6..ca0a238ff3 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx
@@ -50,7 +50,9 @@ const TeamMember = ({ name, email, userRole }: any) => {
           <StyledAvatar>{name[0]}</StyledAvatar>
         </Grid>
         <StyledGrid item>
-          <Typography variant="h5">{name}</Typography>
+          <Typography variant="h4" component="h5">
+            {name}
+          </Typography>
           <Box fontSize="h5.fontSize">{email}</Box>
         </StyledGrid>
         <Grid item>
@@ -85,7 +87,7 @@ const Team: React.FC = () => {
   return (
     <form onSubmit={formik.handleSubmit}>
       <Box pb={3} borderBottom={1}>
-        <Typography variant="h3" gutterBottom>
+        <Typography variant="h2" component="h3" gutterBottom>
           <strong>Team</strong>
         </Typography>
         <Typography variant="body1">
@@ -141,7 +143,7 @@ const Team: React.FC = () => {
         </Grid>
       </Box>
       <Box py={3}>
-        <Typography variant="h3" gutterBottom>
+        <Typography variant="h2" component="h3" gutterBottom>
           <strong>Sharing</strong>
         </Typography>
         <Typography variant="body1" gutterBottom>
diff --git a/editor.planx.uk/src/pages/GlobalSettings.tsx b/editor.planx.uk/src/pages/GlobalSettings.tsx
index 79d172e5d8..164dbbe105 100644
--- a/editor.planx.uk/src/pages/GlobalSettings.tsx
+++ b/editor.planx.uk/src/pages/GlobalSettings.tsx
@@ -49,7 +49,7 @@ function Component() {
         <Typography variant="h1">Global Settings</Typography>
         <Box mb={2}>
           <Box py={3} borderBottom={1}>
-            <Typography variant="h3" gutterBottom>
+            <Typography variant="h2" component="h3" gutterBottom>
               <strong>Footer Elements</strong>
             </Typography>
             <Typography variant="body1">
diff --git a/editor.planx.uk/src/pages/Pay/InviteToPay.tsx b/editor.planx.uk/src/pages/Pay/InviteToPay.tsx
index b17b34ad5c..3d26c4103a 100644
--- a/editor.planx.uk/src/pages/Pay/InviteToPay.tsx
+++ b/editor.planx.uk/src/pages/Pay/InviteToPay.tsx
@@ -37,7 +37,7 @@ const InviteToPay: React.FC<PaymentRequest> = ({ createdAt }) => {
         </Typography>
       </Banner>
       <Container maxWidth="md" sx={{ py: 4 }}>
-        <Typography variant="h3" component="h2" pb={2}>
+        <Typography variant="h2" pb={2}>
           You will be contacted
         </Typography>
         <List>
@@ -51,7 +51,7 @@ const InviteToPay: React.FC<PaymentRequest> = ({ createdAt }) => {
           <li>to inform you whether a certificate has been granted or not</li>
         </List>
         <Divider sx={{ pt: 2 }} />
-        <Typography variant="h3" component="h2" pt={4} pb={2}>
+        <Typography variant="h2" pt={4} pb={2}>
           Contact us
         </Typography>
         <List>
diff --git a/editor.planx.uk/src/pages/Preview/ReconciliationPage.tsx b/editor.planx.uk/src/pages/Preview/ReconciliationPage.tsx
index bca2b6db12..9fe5ccfd6b 100644
--- a/editor.planx.uk/src/pages/Preview/ReconciliationPage.tsx
+++ b/editor.planx.uk/src/pages/Preview/ReconciliationPage.tsx
@@ -87,7 +87,7 @@ const ReconciliationPage: React.FC<Props> = ({
             </Typography>
           </Box>
         )}
-        <Typography variant="h3" component="h2">
+        <Typography variant="h2">
           Review your {hasSections ? "progress" : "answers"} so far
         </Typography>
         {hasSections ? (
diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx
index 5ab05e064f..c14d90a36b 100644
--- a/editor.planx.uk/src/pages/Team.tsx
+++ b/editor.planx.uk/src/pages/Team.tsx
@@ -325,7 +325,7 @@ const Team: React.FC<{ id: number; slug: string }> = ({ id, slug }) => {
     <Root>
       <Dashboard>
         <Box pl={2} pb={2}>
-          <Typography variant="h3" component="h1" gutterBottom>
+          <Typography variant="h2" component="h1" gutterBottom>
             My services
           </Typography>
         </Box>
diff --git a/editor.planx.uk/src/pages/Teams.tsx b/editor.planx.uk/src/pages/Teams.tsx
index d03edd9c7c..59f634fd2c 100644
--- a/editor.planx.uk/src/pages/Teams.tsx
+++ b/editor.planx.uk/src/pages/Teams.tsx
@@ -38,14 +38,14 @@ const Teams: React.FC<Props> = ({ teams }) => {
     <Root>
       <Dashboard>
         <Box pl={2} pb={2}>
-          <Typography variant="h3" component="h1" gutterBottom>
+          <Typography variant="h2" component="h1" gutterBottom>
             Select a team
           </Typography>
         </Box>
         {teams.map(({ name, slug }) => (
           <StyledLink href={`/${slug}`} key={slug} prefetch={false}>
             <Box mb={2.5} px={2.5} py={3} mx={2} component={Card}>
-              <Typography variant="h5" component="h2">
+              <Typography variant="h4" component="h2">
                 {name}
               </Typography>
             </Box>
diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
index a1651ee23b..4f9b83f6cf 100644
--- a/editor.planx.uk/src/theme.ts
+++ b/editor.planx.uk/src/theme.ts
@@ -111,19 +111,23 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
         letterSpacing: SPACING_TIGHT,
         fontWeight: FONT_WEIGHT_BOLD,
       },
-      h3: {
+      h2: {
         fontSize: "2.25rem",
         letterSpacing: SPACING_TIGHT,
         fontWeight: FONT_WEIGHT_BOLD,
       },
-      h4: {
+      h3: {
         fontSize: "1.5rem",
         fontWeight: FONT_WEIGHT_SEMI_BOLD,
       },
-      h5: {
+      h4: {
         fontSize: "1.188rem",
         fontWeight: FONT_WEIGHT_SEMI_BOLD,
       },
+      h5: {
+        fontSize: "1rem",
+        fontWeight: FONT_WEIGHT_SEMI_BOLD,
+      },
       h6: {
         fontSize: "1rem",
         fontWeight: FONT_WEIGHT_SEMI_BOLD,
diff --git a/editor.planx.uk/src/ui/ExpandableList.tsx b/editor.planx.uk/src/ui/ExpandableList.tsx
index 16d0757bcc..d1706e9c19 100644
--- a/editor.planx.uk/src/ui/ExpandableList.tsx
+++ b/editor.planx.uk/src/ui/ExpandableList.tsx
@@ -49,7 +49,7 @@ export function ExpandableListItem(props: {
         disableRipple
         onClick={handleToggle}
       >
-        <Typography variant="h5" component="h2" id={props.headingId}>
+        <Typography variant="h4" component="h2" id={props.headingId}>
           {props.title}
         </Typography>
         <Caret
diff --git a/editor.planx.uk/src/ui/NumberedList.tsx b/editor.planx.uk/src/ui/NumberedList.tsx
index e30806ce0f..1954c3c2e7 100644
--- a/editor.planx.uk/src/ui/NumberedList.tsx
+++ b/editor.planx.uk/src/ui/NumberedList.tsx
@@ -128,7 +128,7 @@ function ListItem(props: Item & { index: number; heading?: HeadingLevel }) {
       >
         <Box>
           <Typography
-            variant="h4"
+            variant="h3"
             component={props.heading || "h5"}
             id={`group-${props.index}-heading`}
             align="left"
diff --git a/editor.planx.uk/src/ui/Palette.stories.tsx b/editor.planx.uk/src/ui/Palette.stories.tsx
index f67913b3a6..c4cc2a12f7 100644
--- a/editor.planx.uk/src/ui/Palette.stories.tsx
+++ b/editor.planx.uk/src/ui/Palette.stories.tsx
@@ -51,7 +51,9 @@ const ColorGrid: React.FC<{ option: PaletteOption }> = (props) => {
 
   return (
     <>
-      <Typography variant="h5">{props.option}</Typography>
+      <Typography variant="h4" component="h5">
+        {props.option}
+      </Typography>
       <Grid container spacing={1}>
         {colors.map((color, i) => {
           return (