Update and rename styleguide.mdx to Styleguide.mdx

src/stories/Styleguide.mdx

@@ -0,0 +1,114 @@
+# Welcome to the GreenwoodJS style guide
+
+  {`
+    :root {
+      --size: 50px;
+    }
+
+    h2 {
+      text-decoration: underline;
+    }
+
+    .palette-box {
+      width: var(--size);
+      height: var(--size);
+      display: block;
+      margin: 0 auto;
+    }
+
+    .palette-primary {
+      background-color: var(--color-primary);
+    }
+
+    .palette-secondary {
+      background-color: var(--color-secondary);
+    }
+
+    .palette-accent {
+      background-color: var(--color-accent);
+    }
+
+    .palette-tertiary {
+      background-color: var(--color-tertiary);
+    }
+
+    .palette-white {
+      background-color: var(--color-white);
+    }
+
+    .palette-black {
+      background-color: var(--color-black);
+    }
+
+    .typography {
+      font-size: 1.4rem;
+    }
+
+    .typography-primary {
+      font-family: var(--font-primary);
+      color: var(--color-primary);
+    }
+
+    .typography-secondary {
+      font-family: var(--font-secondary);
+      color: var(--color-primary);
+    }
+  `}
+
+
+
+
+
+
+
+
+### The GreenwoodJS website styleguide breaks down into the following sections:
+
+1. Colors
+2. Typography
+3. Spacing
+4. Components
+
+
+
+## Colors
+The following theme colors available are:
+
+`--color-primary`
+
+`--color-secondary`
+
+`--color-tertiary`
+
+`--color-accent`
+
+`--color-gray`
+
+`--color-text`
+
+`--color-white`
+
+
+
+## Typography
+The whole website uses Vercel's **Geist** font in the following sizes:
+
+
+
+
+
+## Spacing
+The whole website is built on an 8pt Grid, and spacing is always in multiples of 8px
+
+`--spacing-unit`
+
+
+
+## Components
+👈 All available components can be found on the left sidebar of the Storybook site.
+
+
+
+
+
+