diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee6e650..e834973 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,10 @@ importers:
         version: 13.0.0(typescript@5.7.3)
 
   projects/sprout:
+    dependencies:
+      normalize.css:
+        specifier: ^8.0.1
+        version: 8.0.1
     devDependencies:
       '@chromatic-com/storybook':
         specifier: ^3.2.4
@@ -1431,6 +1435,9 @@ packages:
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
+  normalize.css@8.0.1:
+    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
+
   npm-package-arg@11.0.3:
     resolution: {integrity: sha512-sHGJy8sOC1YraBywpzQlIKBE4pBbGbiF95U6Auspzyem956E0+FtDtsx1ZxlOJkQCZ1AFXAY/yuvtFYrOxF+Bw==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -3310,6 +3317,8 @@ snapshots:
       lower-case: 2.0.2
       tslib: 2.8.1
 
+  normalize.css@8.0.1: {}
+
   npm-package-arg@11.0.3:
     dependencies:
       hosted-git-info: 7.0.2
diff --git a/projects/sprout/.svelte-kit/generated/server/internal.js b/projects/sprout/.svelte-kit/generated/server/internal.js
index b6bf3bd..3d7bcd7 100644
--- a/projects/sprout/.svelte-kit/generated/server/internal.js
+++ b/projects/sprout/.svelte-kit/generated/server/internal.js
@@ -19,7 +19,7 @@ export const options = {
 	root,
 	service_worker: false,
 	templates: {
-		app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div>" + body + "</div>\n\t</body>\n</html>\n",
+		app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div style=\"display: contents\">\n\t\t\t" + body + "\n\t\t</div>\n\t</body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
 	version_hash: "1u568gi"
diff --git a/projects/sprout/src/app.html b/projects/sprout/src/app.html
index 396626c..3ba63a6 100644
--- a/projects/sprout/src/app.html
+++ b/projects/sprout/src/app.html
@@ -6,6 +6,8 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div>%sveltekit.body%</div>
+		<div style="display: contents">
+			%sveltekit.body%
+		</div>
 	</body>
 </html>
diff --git a/projects/sprout/src/lib/Button.svelte b/projects/sprout/src/lib/Button.svelte
index 12787eb..5ae04eb 100644
--- a/projects/sprout/src/lib/Button.svelte
+++ b/projects/sprout/src/lib/Button.svelte
@@ -58,8 +58,8 @@
     }
 
     .secondary {
-        background-color: var(--color-background);
-        border: 2px var(--color-accent-background) solid;
+        background-color: #00000000;
+        border: 3px var(--color-accent-background) solid;
         color: var(--color-text);
     }
     
@@ -71,6 +71,7 @@
     .danger {
         background-color: var(--color-red);
         border-color: var(--color-red);
+        color: var(--color-white);
     }
 
     .danger.disabled {
diff --git a/projects/sprout/src/routes/+page.svelte b/projects/sprout/src/routes/+page.svelte
index 7a5ee63..3382738 100644
--- a/projects/sprout/src/routes/+page.svelte
+++ b/projects/sprout/src/routes/+page.svelte
@@ -1,109 +1,123 @@
 <script>
     import App from "$lib/App.svelte";
+    import Box from "$lib/Box.svelte";
     import Button from "$lib/Button.svelte";
-    import DarkModeButton from "$lib/DarkModeButton.svelte";
-    import LightModeButton from "$lib/LightModeButton.svelte";
+    import CallToAction from "$lib/CallToAction.svelte";
+    import Surface from "$lib/Surface.svelte";
     import ThemeProvider from "$lib/ThemeProvider.svelte";
-
-    let foo = $state(4);
-    let bar = $state(false);
+    import { colorScheme } from "$lib/colorScheme.svelte.js";
 </script>
 
-<div style="padding: 20px; background-color: #f2f2f2;">
-    <h1>Welcome to your library project</h1>
-    <p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
-    <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
-
-    <p>{foo}</p>
-
-    <App>
-        <ThemeProvider colorScheme="generic">
-            <DarkModeButton/>
-            <LightModeButton/>
-            <Button onclick={() => {
-            }}>Installation Guide</Button>
-            <Button type="secondary" onclick={() => {
-                foo--;
-            }}>Installation Guide</Button>
-            <Button type="danger" onclick={() => {console.log("DANGER!")}}>Installation Guide</Button>
-
-            <Button disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="secondary" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="danger" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-        </ThemeProvider>
-        <br>
-        <ThemeProvider colorScheme="wc24">
-            <Button onclick={() => {console.log("PRIMARY"); foo++}}>Installation Guide</Button>
-            <Button type="secondary" onclick={() => {console.log("SECONDARY"); foo--}}>Installation Guide</Button>
-            <Button type="danger" onclick={() => {console.log("DANGER!")}}>Installation Guide</Button>
-
-            <Button disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="secondary" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="danger" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-        </ThemeProvider>
-        <br>
-        <ThemeProvider colorScheme="account">
-            <Button onclick={() => {console.log("PRIMARY"); foo++}}>Installation Guide</Button>
-            <Button type="secondary" onclick={() => {console.log("SECONDARY"); foo--}}>Installation Guide</Button>
-            <Button type="danger" onclick={() => {console.log("DANGER!")}}>Installation Guide</Button>
-
-            <Button disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="secondary" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="danger" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-        </ThemeProvider>
-        <br>
-        <ThemeProvider colorScheme="internal">
-            <Button onclick={() => {console.log("PRIMARY"); foo++}}>Installation Guide</Button>
-            <Button type="secondary" onclick={() => {console.log("SECONDARY"); foo--}}>Installation Guide</Button>
-            <Button type="danger" onclick={() => {console.log("DANGER!")}}>Installation Guide</Button>
-
-            <Button disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="secondary" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="danger" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-        </ThemeProvider>
-        
-        <br>
-
-        <div style="background-color: var(--color-black); padding: 30px">
-        <ThemeProvider colorScheme="generic" >
-            <Button onclick={() => {console.log("PRIMARY"); foo++}}>Installation Guide</Button>
-            <Button type="secondary" onclick={() => {console.log("SECONDARY"); foo--}}>Installation Guide</Button>
-            <Button type="danger" onclick={() => {console.log("DANGER!")}}>Installation Guide</Button>
-
-            <Button disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="secondary" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="danger" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-        </ThemeProvider>
-        <br>
-        <ThemeProvider colorScheme="wc24" >
-            <Button onclick={() => {console.log("PRIMARY"); foo++}}>Installation Guide</Button>
-            <Button type="secondary" onclick={() => {console.log("SECONDARY"); foo--}}>Installation Guide</Button>
-            <Button type="danger" onclick={() => {console.log("DANGER!")}}>Installation Guide</Button>
+<App>
+    <ThemeProvider brandColor="generic">
+        <h1>Heading 1</h1>
+        <h2>Heading 2</h2>
+        <h3>Heading 3</h3>
+        <h4>Heading 4</h4>
+        <Button type="danger">Delete all data!</Button>
+        <CallToAction>Call to action!</CallToAction>
+        Non call to action
+        <Surface>
+            <Box vertical>
+                <Box>
+                    <CallToAction>GOO</CallToAction>
+                    TEXT AND
+                    <Button onclick={() => {
+                        colorScheme.darkModeEnabled = true;
+                    }}>Dark Mode</Button>
+                    <Button onclick={() => {
+                        colorScheme.darkModeEnabled = false;
+                    }}>Light Mode</Button>
+                    <Button>Buttons!</Button>
+                    <Button type="secondary">Buttons!</Button>
+                </Box>
+                <Box vertical>
+                    TEXT AND
+                    <Button>Buttons!</Button>
+                    <Button>Buttons!</Button>
+                    <Button>Buttons!</Button>
+                    <Button type="secondary">Buttons!</Button>
+                </Box>
+            </Box>
+            
+        </Surface>
+    </ThemeProvider>
 
-            <Button disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="secondary" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="danger" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-        </ThemeProvider>
-        <br>
-        <ThemeProvider colorScheme="account" >
-            <Button onclick={() => {console.log("PRIMARY"); foo++}}>Installation Guide</Button>
-            <Button type="secondary" onclick={() => {console.log("SECONDARY"); foo--}}>Installation Guide</Button>
-            <Button type="danger" onclick={() => {console.log("DANGER!")}}>Installation Guide</Button>
+    <ThemeProvider brandColor="internal">
+        <Surface>
+            <Box vertical>
+                <Box>
+                    TEXT AND
+                    <Button onclick={() => {
+                        colorScheme.darkModeEnabled = true;
+                    }}>Dark Mode</Button>
+                    <Button onclick={() => {
+                        colorScheme.darkModeEnabled = false;
+                    }}>Light Mode</Button>
+                    <Button>Buttons!</Button>
+                    <Button type="secondary">Buttons!</Button>
+                </Box>
+                <Box vertical>
+                    TEXT AND
+                    <Button>Buttons!</Button>
+                    <Button>Buttons!</Button>
+                    <Button>Buttons!</Button>
+                    <Button type="secondary">Buttons!</Button>
+                </Box>
+            </Box>
+            
+        </Surface>
+    </ThemeProvider>
 
-            <Button disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="secondary" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="danger" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-        </ThemeProvider>
-        <br>
-        <ThemeProvider colorScheme="internal">
-            <Button onclick={() => {console.log("PRIMARY"); foo++}}>Installation Guide</Button>
-            <Button type="secondary" onclick={() => {console.log("SECONDARY"); foo--}}>Installation Guide</Button>
-            <Button type="danger" onclick={() => {console.log("DANGER!")}}>Installation Guide</Button>
+    <ThemeProvider brandColor="account">
+        <Surface>
+            <Box vertical>
+                <Box>
+                    TEXT AND
+                    <Button onclick={() => {
+                        colorScheme.darkModeEnabled = true;
+                    }}>Dark Mode</Button>
+                    <Button onclick={() => {
+                        colorScheme.darkModeEnabled = false;
+                    }}>Light Mode</Button>
+                    <Button>Buttons!</Button>
+                    <Button type="secondary">Buttons!</Button>
+                </Box>
+                <Box vertical>
+                    TEXT AND
+                    <Button>Buttons!</Button>
+                    <Button>Buttons!</Button>
+                    <Button>Buttons!</Button>
+                    <Button type="secondary">Buttons!</Button>
+                </Box>
+            </Box>
+            
+        </Surface>
+    </ThemeProvider>
 
-            <Button disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="secondary" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-            <Button type="danger" disabled onclick={() => {console.log("THIS IS NOT GOING TO BE PRINTED")}}>Installation Guide</Button>
-        </ThemeProvider>
-        </div>
-    </App>
-</div>
\ No newline at end of file
+    <ThemeProvider brandColor="wc24">
+        <Surface>
+            <Box vertical>
+                <Box>
+                    TEXT AND
+                    <Button onclick={() => {
+                        colorScheme.darkModeEnabled = true;
+                    }}>Dark Mode</Button>
+                    <Button onclick={() => {
+                        colorScheme.darkModeEnabled = false;
+                    }}>Light Mode</Button>
+                    <Button>Buttons!</Button>
+                    <Button type="secondary">Buttons!</Button>
+                </Box>
+                <Box vertical>
+                    TEXT AND
+                    <Button>Buttons!</Button>
+                    <Button>Buttons!</Button>
+                    <Button>Buttons!</Button>
+                    <Button type="secondary">Buttons!</Button>
+                </Box>
+            </Box>
+            
+        </Surface>
+    </ThemeProvider>
+</App>
\ No newline at end of file
