diff --git a/data/docs/example.mdx b/data/docs/example.mdx
index b66cb6f..da89fa6 100644
--- a/data/docs/example.mdx
+++ b/data/docs/example.mdx
@@ -1,5 +1,5 @@
 ---
-title: Full Component Example
+title: Example Component
 description: A full example of a component using CSS Components.
 category: Getting Started
 index: 16
@@ -7,24 +7,30 @@ index: 16
 
 Below is a full example of a basic component put together using CSS Components.
 
-A component will be split into 3 files:
-
 ```bash
 src
 └── components
     └── Panel
         ├── index.tsx # The main component file
         ├── styles.module.css # The CSS file
-        └── styles.tsx # The CSS Components file)
+        └── styles.ts # The CSS Components file
+    ├── SomeOtherComponent
+    └── SomeOtherComponent
 ```
 
-We are going to create a simple `Panel` component that has a title and some content. The component will have a `wide` prop that will make the panel fill the width of its container.
+Each component folder can be split into 3 files:
+
+- `index.tsx`, your standard React component;
+- `styles.module.css`, your standard CSS styles; and
+- `styles.ts`, which bridges the gap between the two.
 
-Here you can see the `Panel` component in action.
+Let's create a simple `Panel` component with a title and some content. The component will have a `wide` variant that will make the panel fill the width of its container.
+
+Here it is in action:
 
 <Preview>
   <Panel title="Hello World" wide>
-    <p>This is some example content. It's not very exciting.</p>
+    <p>This is some example content. It's working great! 😄</p>
   </Panel>
 </Preview>
 
@@ -33,16 +39,18 @@ import Panel from "@/components/Panel";
 
 () => (
   <Panel title="Hello World" wide>
-    <p>This is some example content. It's not very exciting.</p>
+    <p>This is some example content. It's working great! 😄</p>
   </Panel>
 );
 ```
 
-## panel/index.tsx
+## index.tsx
+
+This is the main component file. It's a simple component with a title and some content.
 
-This is the main component file. It's a simple component that has a title and some content. `PanelWrapper`, `Title` and `Content` are all CSS Components that are imported from `styles.tsx`.
+If you've used React in any capacity this format should be very familiar to you, with the exception of `PanelWrapper`, `Title` and `Content`. These are all CSS Components that are imported from `styles.ts`.
 
-Notice how this component is free of ugly CSS class names. Everything is symantec.
+Note how this component is free of ugly CSS class names. Everything is semantic.
 
 ```tsx
 import { PanelWrapper, Title, Content } from "./styles";
@@ -63,41 +71,14 @@ const Panel = ({ title, children, wide }: Props) => (
 export default Panel;
 ```
 
-## panel/styles.tsx
-
-This is the styles file. It contains the CSS Components that are used in the main component file. As you can see, CSS Components are simply a way to map CSS classes to React component in a logical way, nothing more.
-
-```tsx
-import { styled } from "@phantomstudios/css-components";
-
-import css from "./styles.module.css";
-
-export const PanelWrapper = styled("div", {
-  css: css.PanelWrapper,
-  variants: {
-    wide: {
-      true: css.PanelWrapper_wide,
-    },
-  },
-});
-
-export const Title = styled("h2", {
-  css: css.Title,
-});
-
-export const Content = styled("section", {
-  css: css.Content,
-});
-```
-
-Please note that while this example employs standard CSS, you have the freedom to utilize any styling solution of your choice, such as SCSS.
+## styles.module.css
 
-## panel/styles.module.css
+Next is your bog standard CSS file. It contains all the CSS classes used by CSS Components. You're free to name them how you want, [but we do have a helpful naming convention](/docs/cli).
 
-Lastly, this is the bog standard CSS file. It contains the CSS classes that are used in the CSS Components.
+While this file uses CSS, you can use whatever styling solution you want. We'd recommend using SCSS; it works really well with CSS components!
 
 ```css
-.PanelWrapper {
+div.PanelWrapper {
   display: flex;
   flex-direction: column;
   text-align: center;
@@ -109,7 +90,7 @@ Lastly, this is the bog standard CSS file. It contains the CSS classes that are
   color: black;
 }
 
-.PanelWrapper_wide {
+div.PanelWrapper_wide {
   width: 100%;
 }
 
@@ -123,3 +104,40 @@ section.Content {
   padding: 1rem;
 }
 ```
+
+## styles.ts ✨
+
+The styles file is where the magic happens! It contains all of the CSS Components that are imported into the main React component.
+
+As you can see, CSS Components are nothing more than a way to map CSS classes to React components.
+
+You can either create this file yourself, [or use our helpful CLI tool](/docs/cli).
+
+```ts
+import { styled } from "@phantomstudios/css-components";
+
+import css from "./styles.module.css";
+
+export const PanelWrapper = styled("div", {
+  css: css.PanelWrapper,
+  variants: {
+    wide: {
+      true: css.PanelWrapper_wide,
+    },
+  },
+});
+
+export const Title = styled("h2", {
+  css: css.Title,
+});
+
+export const Content = styled("section", {
+  css: css.Content,
+});
+```
+
+And that's it!
+
+As you can see, the only thing that's really different from your standard, CSS-Component-less workflow is the `styles.ts` file. Pop that in and you're good to go.
+
+Happy styling!
diff --git a/data/docs/introduction.mdx b/data/docs/introduction.mdx
index 69b4e73..f38c70b 100644
--- a/data/docs/introduction.mdx
+++ b/data/docs/introduction.mdx
@@ -5,6 +5,8 @@ index: 1
 description: The what and the why of CSS Components.
 ---
 
+> ⚠️ _If you just want a quick reference, [head on over to the example](/docs/example)._
+
 Phantom is a firm believer in the versatility and power of CSS-in-JS, using it for all its projects. However, with the advancements in React like [Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components) and Next.js 13, using CSS-in-JS can become a challenge. The conventional CSS styling options fail to offer a seamless developer experience and result in cluttered code.
 
 CSS Components was created to solve these problems by offering a React component library that prioritizes component architecture and developer experience. Inspired by [Stitches](https://stitches.dev/), it brings the core functionality to React components, making it easier to wrap CSS styles in React and streamline the use of CSS styles. CSS Components is not a complete styling system, but rather a convenient tool that enhances the developer experience.
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 7aaaf63..225a710 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -48,7 +48,7 @@ main.Hero h1 a:active {
 
 main.Hero p {
   text-align: center;
-  color: #999;
+  color: var(--color-fg-darkest);
   margin: 0;
   padding-bottom: 2rem;
 }
diff --git a/src/components/CodeExample/styles.module.css b/src/components/CodeExample/styles.module.css
index a570e89..1267c5f 100644
--- a/src/components/CodeExample/styles.module.css
+++ b/src/components/CodeExample/styles.module.css
@@ -20,7 +20,7 @@ li.CodeSection {
   margin: 0 -1rem;
   border: 2px solid var(--color-grey);
   border-radius: 4px;
-  transition: all 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out;
   width: 100%;
 }
 
diff --git a/src/components/Doc/styles.module.css b/src/components/Doc/styles.module.scss
similarity index 73%
rename from src/components/Doc/styles.module.css
rename to src/components/Doc/styles.module.scss
index db259ee..b253fc3 100644
--- a/src/components/Doc/styles.module.css
+++ b/src/components/Doc/styles.module.scss
@@ -1,11 +1,25 @@
 main.DocWrapper {
   padding: 0 2rem 4rem;
+  color: var(--color-fg-darker);
+
+  blockquote {
+    margin: 0;
+    padding: 24px;
+    color: var(--color-fg-darker);
+    border-radius: 4px;
+    background-color: var(--color-bg-light);
+
+    p {
+      margin: 0;
+    }
+  }
 }
 
 main.DocWrapper > h1,
 main.DocWrapper > h2,
 main.DocWrapper > h3,
 main.DocWrapper > h4 {
+  color: var(--color-fg);
   margin: 2em 0 0.25em 0;
   font-weight: 700;
 }
@@ -33,9 +47,8 @@ main.DocWrapper > hr {
 }
 
 main.DocWrapper > p {
-  font-size: 17px;
-  color: #bbb;
-  line-height: 2;
+  color: var(--color-fg-darker);
+  line-height: 1.5;
 }
 
 main.DocWrapper > ul {
@@ -45,7 +58,7 @@ main.DocWrapper > ul {
 p.Description {
   font-size: 22px;
   font-style: italic;
-  color: #777;
+  color: var(--color-fg-darkest);
 
   margin: 0 0 2em;
 }
@@ -60,6 +73,13 @@ main.DocWrapper pre {
 
 main.DocWrapper a {
   font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  transition: color 0.2s;
+
+  &:hover {
+    color: var(--color-fg-dark);
+  }
 }
 
 /* This styles inline code (i.e. NOT the MDXComponents/code component). */
diff --git a/src/components/Doc/styles.ts b/src/components/Doc/styles.ts
index c3177ac..bb5e5fe 100644
--- a/src/components/Doc/styles.ts
+++ b/src/components/Doc/styles.ts
@@ -1,6 +1,6 @@
 import { styled } from "@phantomstudios/css-components";
 
-import css from "./styles.module.css";
+import css from "./styles.module.scss";
 
 export const DocWrapper = styled("main", {
   css: css.DocWrapper,
diff --git a/src/components/Footer/styles.module.css b/src/components/Footer/styles.module.css
index a0638d1..b1dddaf 100644
--- a/src/components/Footer/styles.module.css
+++ b/src/components/Footer/styles.module.css
@@ -4,7 +4,7 @@ footer.FooterWrapper {
   align-items: center;
   padding: 6rem;
 
-  color: #666;
+  color: var(--color-fg-darkest);
   text-align: center;
 }
 
diff --git a/src/components/MDXComponents/CheckoutButton/styles.module.css b/src/components/MDXComponents/CheckoutButton/styles.module.css
index 978d02f..a5f28ae 100644
--- a/src/components/MDXComponents/CheckoutButton/styles.module.css
+++ b/src/components/MDXComponents/CheckoutButton/styles.module.css
@@ -9,6 +9,6 @@ button.CheckoutButtonWrapper {
 }
 
 button.CheckoutButtonWrapper:hover {
-  background-color: #00000044;
+  background-color: var(--color-bg-darker);
   color: white;
 }
diff --git a/src/components/MDXComponents/Panel/styles.module.css b/src/components/MDXComponents/Panel/styles.module.css
index 5f2de1b..253f4a7 100644
--- a/src/components/MDXComponents/Panel/styles.module.css
+++ b/src/components/MDXComponents/Panel/styles.module.css
@@ -1,4 +1,4 @@
-.PanelWrapper {
+div.PanelWrapper {
   display: flex;
   flex-direction: column;
   text-align: center;
@@ -6,20 +6,20 @@
   width: 240px;
   border-radius: 0.5rem;
   overflow: hidden;
-  background-color: #e6e6e6;
+  background-color: var(--color-fg);
   color: black;
 }
 
-.PanelWrapper_wide{
+div.PanelWrapper_wide {
   width: 100%;
 }
 
-h2.Title{
-  background-color: #d6d6d6;
+h2.Title {
+  background-color: var(--color-fg-dark);
   margin: 0;
   padding: 1rem;
 }
 
-section.Content{
+section.Content {
   padding: 1rem;
 }
diff --git a/src/components/Stats/styles.module.css b/src/components/Stats/styles.module.css
index 5244084..a7e1e73 100644
--- a/src/components/Stats/styles.module.css
+++ b/src/components/Stats/styles.module.css
@@ -33,7 +33,7 @@ li.statCard {
   width: 240px;
   height: 200px;
   background-color: var(--color-bg-dark);
-  transition: 0.2s;
+  transition: background-color 0.2s;
 }
 
 li.statCard:hover {
diff --git a/src/styles/colors.css b/src/styles/colors.css
index c4cabd0..8c4009c 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -2,6 +2,10 @@
 *::after,
 *::before {
   --color-fg: #fafafa;
+  --color-fg-dark: #e9e9e9;
+  --color-fg-darker: #bbb;
+  --color-fg-darkest: #666;
+  --color-bg-light: #2a2e36;
   --color-bg: #21252b;
   --color-bg-dark: #070a1144;
   --color-bg-darker: #070a1188;