tweak typography

gatsby-browser.js

@@ -1 +1,2 @@
 import "@fontsource/karmilla/400.css"
+import "@fontsource/karmilla/700.css"

src/components/theme.js

@@ -11,11 +11,24 @@ const theme = createTheme({
     },
     text: {
       primary: "#DC3E9D",
-    }
+    },
   },
   typography: {
-    fontFamily: `"Karmilla", sans-serif`
+    fontFamily: `"Karmilla", sans-serif`,
-  }
+    h1: {
+      fontSize: 14,
+      fontWeight: 700,
+    },
+    h2: {
+      fontSize: 12,
+    },
+    body1: {
+      fontSize: 21,
+    }
+  },
+  shape: {
+    borderRadius: 0,
+  },
 })
 
 export default theme

src/pages/index.js

@@ -46,7 +46,7 @@ const BlogIndex = ({ data, location }) => {
       >
         Autonomic is a co-operative that is owned and run by its workers
       </Typography>
-      <Typography variant="h2">What we offer</Typography>
+      <Typography variant="h1" component="h2" sx={{textTransform: "uppercase"}}>What we offer</Typography>
       <List>
         {serviceMenu.map(({ label, path }) => (
           <ListItem key={label}>
@@ -62,7 +62,7 @@ const BlogIndex = ({ data, location }) => {
           </ListItem>
         ))}
       </List>
-      <Typography variant="h2" textTransform={"uppercase"}>
+      <Typography variant="h2" component="h3" textTransform={"uppercase"}>
         Interested? Work with us
       </Typography>
       <Typography>