create custom theme

gatsby-browser.js

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

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@fontsource/karmilla": "^4.5.3",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.3",
     "gatsby": "^5.3.3",

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,6 +25,7 @@ const Layout = ({ location, title, children }) => {
 
   return (
     <>
+      <ThemeProvider theme={theme}>
       <CssBaseline />
         <AppBar
           component="header"
@@ -57,6 +59,7 @@ const Layout = ({ location, title, children }) => {
             <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` }}>

yarn.lock

@@ -1183,6 +1183,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/karmilla@^4.5.3":
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/@fontsource/karmilla/-/karmilla-4.5.3.tgz#80267f8ccc76e841308e52273b2d5007bfc50377"
+  integrity sha512-a5bINn+wkQqT4jUmJ5HZ5YnjhwDeJDve26zrD667qjT8ougbwHHN1haBvZOex1a1YGdE2/5FNlTOUCzQmvFEHA==
+
 "@gatsbyjs/parcel-namer-relative-to-cwd@2.3.1":
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-2.3.1.tgz#44779296e2b2f5e5d1fb6ce40a7661647d65f6fc"