create custom theme

src/components/layout.js

@@ -1,7 +1,8 @@
 import * as React from "react"
 import { Link as GatsbyLink } from "gatsby"
-import { AppBar, Container, CssBaseline, Grid, Link, Toolbar } from "@mui/material"
+import { AppBar, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
 import NavMenu from "./nav-menu"
+import theme from "./theme"
 
 const Layout = ({ location, title, children }) => {
   // const rootPath = `${__PATH_PREFIX__}/`
@@ -24,39 +25,41 @@ const Layout = ({ location, title, children }) => {
 
   return (
     <>
+      <ThemeProvider theme={theme}>
       <CssBaseline />
-      <AppBar
-        component="header"
-        color="transparent"
-        position="relative"
-        elevation={0}
-      >
-        <Toolbar>
-          <Link
-            underline="hover"
-            component={GatsbyLink}
-            to="/"
-            sx={{ textTransform: "lowercase" }}
-          >
-            {title}
-          </Link>
-        </Toolbar>
-      </AppBar>
-      <Container>
-        <Grid container>
-          <Grid item xs={12} md={2}>
-            <NavMenu />
+        <AppBar
+          component="header"
+          color="transparent"
+          position="relative"
+          elevation={0}
+        >
+          <Toolbar>
+            <Link
+              underline="hover"
+              component={GatsbyLink}
+              to="/"
+              sx={{ textTransform: "lowercase" }}
+            >
+              {title}
+            </Link>
+          </Toolbar>
+        </AppBar>
+        <Container>
+          <Grid container>
+            <Grid item xs={12} md={2}>
+              <NavMenu />
+            </Grid>
+            <Grid item xs={12} md={10}>
+              <main>{children}</main>
+            </Grid>
           </Grid>
-          <Grid item xs={12} md={10}>
-            <main>{children}</main>
-          </Grid>
-        </Grid>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.com">Gatsby</a>
-        </footer>
-      </Container>
+          <footer>
+            © {new Date().getFullYear()}, Built with
+            {` `}
+            <a href="https://www.gatsbyjs.com">Gatsby</a>
+          </footer>
+        </Container>
+      </ThemeProvider>
     </>
   )
 }

src/components/theme.js

@@ -0,0 +1,21 @@
+import { createTheme } from "@mui/material";
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#DC3E9D",
+    },
+    secondary: {
+      main: "#0FB45D",
+      contrastText: "#FFF",
+    },
+    text: {
+      primary: "#DC3E9D",
+    }
+  },
+  typography: {
+    fontFamily: `"Karmilla", sans-serif`
+  }
+})
+
+export default theme

src/pages/index.js

@@ -40,7 +40,10 @@ const BlogIndex = ({ data, location }) => {
 
   return (
     <Layout location={location} title={siteTitle}>
-      <Typography variant="h1">
+      <Typography
+        variant="h1"
+        sx={{ fontWeight: 400, fontSize: 44, lineHeight: "40px" }}
+      >
         Autonomic is a co-operative that is owned and run by its workers
       </Typography>
       <Typography variant="h2">What we offer</Typography>
@@ -89,7 +92,9 @@ const BlogIndex = ({ data, location }) => {
       </Typography>
 
       <Box display="flex" justifyContent="center">
-        <Button variant="contained">Contact us at hello@autonomic.zone</Button>
+        <Button variant="contained" color="secondary">
+          Contact us at hello@autonomic.zone
+        </Button>
       </Box>
       {/* <Bio /> */}
       {/* <ol style={{ listStyle: `none` }}>