diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index bb7c2f039..8d450a6e8 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,4 @@
-import '../src/styles.css'
+import '@/styles/theme.css'
 
 export const tags = ['autodocs']
 export const parameters = {}
diff --git a/README.md b/README.md
index 7f7d40b7e..2152b8bab 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ And don't forget to also include the CSS, either with a link tag or inside a CSS
 ```
 
 ```html
-  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/styles.css">
+  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/theme.css">
 ```
 
 You can also use some of the helpers exported from the default entry:
@@ -76,7 +76,7 @@ Solid-UI provides **ESM** bundles for direct browser usage. You'll also need to
 ```html
 <html>
 <head>
-  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/styles.css">
+  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/theme.css">
 </head>
 <body>
   <div id="app"></div>
@@ -98,7 +98,7 @@ You can also use [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML
 ```html
 <html>
 <head>
-  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/styles.css">
+  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/theme.css">
 </head>
 <body>
   <div id="app"></div>
@@ -165,7 +165,7 @@ The build configuration uses [Vite](https://vite.dev/) and is centralized in the
 The config can be invoked with 4 different modes:
 
 - Default: This is the one used to generate ESM and CJS files to be consumed through npm (generates `*.cjs.js` and `*.esm.js` files respectively). It's also used to run Vitest tests and the Storybook.
-- `styles`: This mode generates the `styles.css` file that includes global styles (CSS variables for the Design System Tokens).
+- `styles`: This mode generates the `theme.css` file that includes global styles (CSS variables for the Design System Tokens).
 - `cdn`: This generates the ESM bundle to be consumed through CDNs, which has no external dependencies.
 - `cdn-legacy`: This generates the legacy UMD bundle to be consumed by legacy CDNs that externalize `rdflib` and `solid-logic` (no longer recommended).
 
diff --git a/examples/header/index.html b/examples/header/index.html
index e9d8df7d7..d7864bf73 100644
--- a/examples/header/index.html
+++ b/examples/header/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset='UTF-8'>
   <title>solid-ui UI.widgets.header examples page</title>
-  <link rel="stylesheet" href="../../dist/styles.css">
+  <link rel="stylesheet" href="../../dist/theme.css">
   <script src="https://unpkg.com/rdflib/dist/rdflib.min.js"></script>
   <script src="https://unpkg.com/solid-logic/dist/solid-logic.min.js"></script>
   <script src="../../dist/solid-ui.js"></script>
diff --git a/examples/matrix/index.html b/examples/matrix/index.html
index a52bce7e0..7934d9aab 100644
--- a/examples/matrix/index.html
+++ b/examples/matrix/index.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset='UTF-8'>
 <title>Test matrix.js</title>
-<link rel="stylesheet" href="../../dist/styles.css">
+<link rel="stylesheet" href="../../dist/theme.css">
 <!-- <link type="text/css" rel="stylesheet"
  href="https://linkeddata.github.io/tabulator-firefox/content/tabbedtab.css" /> -->
 <style>
diff --git a/package-lock.json b/package-lock.json
index 5cb0269e2..ee5109bd3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
 				"mime-types": "^3.0.2",
 				"pane-registry": "^3.1.1",
 				"solid-namespace": "^0.5.4",
-				"tailwindcss": "^4.3.0",
+				"tailwindcss": "4.3.0",
 				"uuid": "^14.0.0"
 			},
 			"devDependencies": {
@@ -4562,6 +4562,13 @@
 				"tailwindcss": "4.3.1"
 			}
 		},
+		"node_modules/@tailwindcss/node/node_modules/tailwindcss": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.1.tgz",
+			"integrity": "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@tailwindcss/oxide": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.1.tgz",
@@ -4817,6 +4824,13 @@
 				"tailwindcss": "4.3.1"
 			}
 		},
+		"node_modules/@tailwindcss/postcss/node_modules/tailwindcss": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.1.tgz",
+			"integrity": "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@tailwindcss/vite": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.1.tgz",
@@ -4832,6 +4846,13 @@
 				"vite": "^5.2.0 || ^6 || ^7 || ^8"
 			}
 		},
+		"node_modules/@tailwindcss/vite/node_modules/tailwindcss": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.1.tgz",
+			"integrity": "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@testing-library/dom": {
 			"version": "10.4.1",
 			"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@@ -13263,9 +13284,9 @@
 			"license": "MIT"
 		},
 		"node_modules/tailwindcss": {
-			"version": "4.3.1",
-			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.1.tgz",
-			"integrity": "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==",
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
+			"integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
 			"license": "MIT"
 		},
 		"node_modules/tapable": {
diff --git a/package.json b/package.json
index 4e46a4d13..cd4afa37a 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
 	"types": "dist/index.d.ts",
 	"exports": {
 		".": {
-			"style": "./dist/styles.css",
+			"style": "./dist/theme.css",
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.esm.js",
 			"require": "./dist/index.cjs.js"
@@ -34,8 +34,8 @@
 		"build-cdn-legacy": "vite build --mode cdn-legacy",
 		"build-npm": "vite build",
 		"build-styles": "vite build --mode styles",
-        "build-version": "sh ./timestamp.sh > src/versionInfo.ts && eslint 'src/versionInfo.ts' --fix",
-        "postbuild-js": "rm -f dist/versionInfo.d.ts dist/versionInfo.d.ts.map",
+		"build-version": "sh ./timestamp.sh > src/versionInfo.ts && eslint 'src/versionInfo.ts' --fix",
+		"postbuild-js": "rm -f dist/versionInfo.d.ts dist/versionInfo.d.ts.map",
 		"watch": "concurrently -k -n npm,styles \"npm:watch-npm\" \"npm:watch-styles\"",
 		"watch-npm": "vite build --watch",
 		"watch-styles": "vite build --mode styles --watch",
@@ -87,7 +87,7 @@
 		"mime-types": "^3.0.2",
 		"pane-registry": "^3.1.1",
 		"solid-namespace": "^0.5.4",
-		"tailwindcss": "^4.3.0",
+		"tailwindcss": "4.3.0",
 		"uuid": "^14.0.0"
 	},
 	"peerDependencies": {
diff --git a/src/design-system/components/account/Account.stories.ts b/src/components/account/Account.stories.ts
similarity index 72%
rename from src/design-system/components/account/Account.stories.ts
rename to src/components/account/Account.stories.ts
index 3e63c88fd..15cf70254 100644
--- a/src/design-system/components/account/Account.stories.ts
+++ b/src/components/account/Account.stories.ts
@@ -1,11 +1,10 @@
 import { html } from 'lit'
+import { USER_OPTIONS, defineAuthStoryRender } from '@/storybook'
 
 import './Account'
-import { USER_OPTIONS } from '../../../storybook/stubs'
-import { defineAuthStoryRender } from '../../../storybook'
 
 const meta = {
-  title: 'Design System/Account',
+  title: 'Account',
   args: {
     user: 'Alice',
   },
diff --git a/src/design-system/components/account/Account.styles.css b/src/components/account/Account.styles.css
similarity index 92%
rename from src/design-system/components/account/Account.styles.css
rename to src/components/account/Account.styles.css
index abfc05ad4..c191abf28 100644
--- a/src/design-system/components/account/Account.styles.css
+++ b/src/components/account/Account.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 :host {
     display: inline-flex;
     flex-direction: row;
@@ -21,7 +19,7 @@
         border-radius: calc((var(--image-size) + 2 * var(--padding) + 2 * var(--border-width)) / 2);
         color: var(--solid-ui-color-white);
 
-        solid-avatar {
+        solid-ui-avatar {
             width: var(--image-size);
             height: var(--image-size);
             border: var(--border-width) solid var(--solid-ui-color-white);
diff --git a/src/design-system/components/account/Account.ts b/src/components/account/Account.ts
similarity index 72%
rename from src/design-system/components/account/Account.ts
rename to src/components/account/Account.ts
index 87886dce2..87ec9b7db 100644
--- a/src/design-system/components/account/Account.ts
+++ b/src/components/account/Account.ts
@@ -1,21 +1,21 @@
 import { consume } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '../../../primitives/lib/auth/context'
+import { customElement, WebComponent } from '@/lib/components'
+import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 
-import '../../../design-system/components/button'
-import '../../../primitives/components/avatar'
-import '../../../primitives/components/login-button'
-import '../../../primitives/components/signup-button'
-import '../../../primitives/components/logout-button'
-import '../menu'
-import '../menu-items'
-import '../menu-item'
-import '~icons/lucide/user'
-import '~icons/lucide/log-in'
+import '@/components/avatar'
+import '@/design-system/components/button'
+import '@/design-system/components/login-button'
+import '@/components/logout-button'
+import '@/components/menu-item'
+import '@/components/menu-items'
+import '@/components/menu'
+import '@/design-system/components/signup-button'
 import '~icons/lucide/chevron-down'
+import '~icons/lucide/log-in'
 import '~icons/lucide/log-out'
+import '~icons/lucide/user'
+
 import styles from './Account.styles.css'
 
 @customElement('solid-ui-account')
@@ -45,35 +45,35 @@ export default class Account extends WebComponent {
   protected render () {
     if (!this.auth.account) {
       return html`
-        <solid-login-button>
+        <solid-ui-login-button>
             <solid-ui-button slot="trigger">
                 <icon-lucide-user slot="left-icon"></icon-lucide-user>
                 Log In
             </solid-ui-button>
-        </solid-login-button>
-        <solid-signup-button>
+        </solid-ui-login-button>
+        <solid-ui-signup-button>
             <solid-ui-button slot="trigger" variant="outline">
                 <icon-lucide-log-in slot="left-icon"></icon-lucide-log-in>
                 Sign Up
             </solid-ui-button>
-        </solid-signup-button>
+        </solid-ui-signup-button>
       `
     }
 
     return html`
         <solid-ui-menu>
             <button type="button" slot="trigger">
-                <solid-avatar></solid-avatar>
+                <solid-ui-avatar></solid-ui-avatar>
                 <icon-lucide-chevron-down slot="right-icon"></icon-lucide-chevron-down>
             </button>
 
             <solid-ui-menu-items>
-                <solid-logout-button>
+                <solid-ui-logout-button>
                     <solid-ui-menu-item slot="trigger">
                         <icon-lucide-log-out slot="left-icon"></icon-lucide-log-out>
                         Sign out
                     </solid-ui-menu-item>
-                </solid-logout-button>
+                </solid-ui-logout-button>
             </solid-ui-menu-items>
         </solid-ui-menu>
     `
diff --git a/src/design-system/components/account/index.ts b/src/components/account/index.ts
similarity index 100%
rename from src/design-system/components/account/index.ts
rename to src/components/account/index.ts
diff --git a/src/primitives/components/avatar/Avatar.stories.ts b/src/components/avatar/Avatar.stories.ts
similarity index 68%
rename from src/primitives/components/avatar/Avatar.stories.ts
rename to src/components/avatar/Avatar.stories.ts
index d39ddb5dd..74c89b743 100644
--- a/src/primitives/components/avatar/Avatar.stories.ts
+++ b/src/components/avatar/Avatar.stories.ts
@@ -1,11 +1,10 @@
 import { html } from 'lit'
-import { defineAuthStoryRender } from '../../../storybook'
+import { USER_OPTIONS, defineAuthStoryRender } from '@/storybook'
 
 import './Avatar'
-import { USER_OPTIONS } from '../../../storybook/stubs'
 
 const meta = {
-  title: 'Primitives/Avatar',
+  title: 'Avatar',
   args: {
     user: 'Alice',
   },
@@ -14,7 +13,7 @@ const meta = {
   }
 } as const
 
-const render = defineAuthStoryRender<typeof meta.argTypes>(() => html`<solid-avatar></solid-avatar>`)
+const render = defineAuthStoryRender<typeof meta.argTypes>(() => html`<solid-ui-avatar></solid-ui-avatar>`)
 
 export const Primary = { render }
 export const Fallback = { render, args: { user: 'Bob' } }
diff --git a/src/primitives/components/avatar/Avatar.styles.css b/src/components/avatar/Avatar.styles.css
similarity index 79%
rename from src/primitives/components/avatar/Avatar.styles.css
rename to src/components/avatar/Avatar.styles.css
index a56aa1cd9..8fe682a4a 100644
--- a/src/primitives/components/avatar/Avatar.styles.css
+++ b/src/components/avatar/Avatar.styles.css
@@ -14,12 +14,12 @@
 }
 
 :host(:state(fallback)) {
-    background: var(--solid-color-gray-100);
+    background: var(--solid-ui-color-gray-100);
     justify-content: center;
     align-items: center;
 
     icon-lucide-circle-user {
-        color: var(--solid-color-gray-200);
+        color: var(--solid-ui-color-gray-200);
         width: 50%;
         height: 50%;
     }
diff --git a/src/primitives/components/avatar/Avatar.ts b/src/components/avatar/Avatar.ts
similarity index 73%
rename from src/primitives/components/avatar/Avatar.ts
rename to src/components/avatar/Avatar.ts
index 29560c196..317d44000 100644
--- a/src/primitives/components/avatar/Avatar.ts
+++ b/src/components/avatar/Avatar.ts
@@ -1,16 +1,15 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { consume } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../lib/customElement'
-import WebComponent from '../../lib/WebComponent'
-import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '../../lib/auth/context'
-import commonStyles from '../../styles/common.styles.css'
+import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 
 import '~icons/lucide/circle-user'
+
 import styles from './Avatar.styles.css'
 
-@customElement('solid-avatar')
+@customElement('solid-ui-avatar')
 export default class Avatar extends WebComponent {
-  static styles = [commonStyles, styles]
+  static styles = styles
   static states = {
     fallback: (component: Avatar) => !component.auth.account?.avatarUrl,
   }
diff --git a/src/primitives/components/avatar/index.ts b/src/components/avatar/index.ts
similarity index 100%
rename from src/primitives/components/avatar/index.ts
rename to src/components/avatar/index.ts
diff --git a/src/design-system/components/combobox-option/ComboboxOption.ts b/src/components/combobox-option/ComboboxOption.ts
similarity index 69%
rename from src/design-system/components/combobox-option/ComboboxOption.ts
rename to src/components/combobox-option/ComboboxOption.ts
index 31b96ba65..53089453a 100644
--- a/src/design-system/components/combobox-option/ComboboxOption.ts
+++ b/src/components/combobox-option/ComboboxOption.ts
@@ -1,7 +1,6 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { html, nothing } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
 import { property } from 'lit/decorators.js'
-import WebComponent from '../../../primitives/lib/WebComponent'
 
 @customElement('solid-ui-combobox-option')
 export default class ComboboxOption extends WebComponent {
diff --git a/src/design-system/components/combobox-option/index.ts b/src/components/combobox-option/index.ts
similarity index 100%
rename from src/design-system/components/combobox-option/index.ts
rename to src/components/combobox-option/index.ts
diff --git a/src/design-system/components/dialog-content/DialogContent.styles.css b/src/components/dialog-content/DialogContent.styles.css
similarity index 65%
rename from src/design-system/components/dialog-content/DialogContent.styles.css
rename to src/components/dialog-content/DialogContent.styles.css
index be7ad64da..1146660c8 100644
--- a/src/design-system/components/dialog-content/DialogContent.styles.css
+++ b/src/components/dialog-content/DialogContent.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 :host {
   display: flex;
   flex-direction: column;
diff --git a/src/design-system/components/dialog-content/DialogContent.ts b/src/components/dialog-content/DialogContent.ts
similarity index 56%
rename from src/design-system/components/dialog-content/DialogContent.ts
rename to src/components/dialog-content/DialogContent.ts
index 225d81421..7cbb85c1a 100644
--- a/src/design-system/components/dialog-content/DialogContent.ts
+++ b/src/components/dialog-content/DialogContent.ts
@@ -1,6 +1,6 @@
+import { customElement, WebComponent } from '@/lib/components'
+
 import styles from './DialogContent.styles.css'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { customElement } from '../../../primitives/lib/customElement'
 
 @customElement('solid-ui-dialog-content')
 export default class DialogContent extends WebComponent {
diff --git a/src/design-system/components/dialog-content/index.ts b/src/components/dialog-content/index.ts
similarity index 100%
rename from src/design-system/components/dialog-content/index.ts
rename to src/components/dialog-content/index.ts
diff --git a/src/design-system/components/dialog-footer/DialogFooter.styles.css b/src/components/dialog-footer/DialogFooter.styles.css
similarity index 79%
rename from src/design-system/components/dialog-footer/DialogFooter.styles.css
rename to src/components/dialog-footer/DialogFooter.styles.css
index 13292ad0c..3b941847c 100644
--- a/src/design-system/components/dialog-footer/DialogFooter.styles.css
+++ b/src/components/dialog-footer/DialogFooter.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 :host {
   display: flex;
   justify-content: space-between;
diff --git a/src/design-system/components/dialog-footer/DialogFooter.ts b/src/components/dialog-footer/DialogFooter.ts
similarity index 56%
rename from src/design-system/components/dialog-footer/DialogFooter.ts
rename to src/components/dialog-footer/DialogFooter.ts
index 9f027ca55..37de3c09d 100644
--- a/src/design-system/components/dialog-footer/DialogFooter.ts
+++ b/src/components/dialog-footer/DialogFooter.ts
@@ -1,6 +1,6 @@
+import { customElement, WebComponent } from '@/lib/components'
+
 import styles from './DialogFooter.styles.css'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { customElement } from '../../../primitives/lib/customElement'
 
 @customElement('solid-ui-dialog-footer')
 export default class DialogFooter extends WebComponent {
diff --git a/src/design-system/components/dialog-footer/index.ts b/src/components/dialog-footer/index.ts
similarity index 100%
rename from src/design-system/components/dialog-footer/index.ts
rename to src/components/dialog-footer/index.ts
diff --git a/src/design-system/components/dialog-header/DialogHeader.styles.css b/src/components/dialog-header/DialogHeader.styles.css
similarity index 86%
rename from src/design-system/components/dialog-header/DialogHeader.styles.css
rename to src/components/dialog-header/DialogHeader.styles.css
index 92a941409..da2fd7258 100644
--- a/src/design-system/components/dialog-header/DialogHeader.styles.css
+++ b/src/components/dialog-header/DialogHeader.styles.css
@@ -1,5 +1,3 @@
-@import "../../styles/common.styles.css";
-
 :host {
   display: flex;
   justify-content: space-between;
diff --git a/src/design-system/components/dialog-header/DialogHeader.ts b/src/components/dialog-header/DialogHeader.ts
similarity index 56%
rename from src/design-system/components/dialog-header/DialogHeader.ts
rename to src/components/dialog-header/DialogHeader.ts
index f9eb801bf..203d150e2 100644
--- a/src/design-system/components/dialog-header/DialogHeader.ts
+++ b/src/components/dialog-header/DialogHeader.ts
@@ -1,6 +1,6 @@
+import { customElement, WebComponent } from '@/lib/components'
+
 import styles from './DialogHeader.styles.css'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { customElement } from '../../../primitives/lib/customElement'
 
 @customElement('solid-ui-dialog-header')
 export default class DialogHeader extends WebComponent {
diff --git a/src/design-system/components/dialog-header/index.ts b/src/components/dialog-header/index.ts
similarity index 100%
rename from src/design-system/components/dialog-header/index.ts
rename to src/components/dialog-header/index.ts
diff --git a/src/design-system/components/dialog-provider/DialogProvider.ts b/src/components/dialog-provider/DialogProvider.ts
similarity index 79%
rename from src/design-system/components/dialog-provider/DialogProvider.ts
rename to src/components/dialog-provider/DialogProvider.ts
index b9d52704d..f797d9288 100644
--- a/src/design-system/components/dialog-provider/DialogProvider.ts
+++ b/src/components/dialog-provider/DialogProvider.ts
@@ -1,8 +1,7 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { provide } from '@lit/context'
-import { customElement } from '../../../primitives/lib/customElement'
 import { property } from 'lit/decorators.js'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { DialogContext, dialogContext } from '../../lib/dialogs/context'
+import { DialogContext, dialogContext } from '@/lib/dialogs/context'
 
 @customElement('solid-ui-dialog-provider')
 export default class DialogProvider extends WebComponent {
diff --git a/src/design-system/components/dialog-provider/index.ts b/src/components/dialog-provider/index.ts
similarity index 100%
rename from src/design-system/components/dialog-provider/index.ts
rename to src/components/dialog-provider/index.ts
diff --git a/src/design-system/components/dialog/Dialog.styles.css b/src/components/dialog/Dialog.styles.css
similarity index 85%
rename from src/design-system/components/dialog/Dialog.styles.css
rename to src/components/dialog/Dialog.styles.css
index 37f5d2cdb..2b6dbbb82 100644
--- a/src/design-system/components/dialog/Dialog.styles.css
+++ b/src/components/dialog/Dialog.styles.css
@@ -1,5 +1,3 @@
-@import "../../styles/common.styles.css";
-
 dialog {
   margin: auto;
   border-radius: 5px;
diff --git a/src/design-system/components/dialog/Dialog.ts b/src/components/dialog/Dialog.ts
similarity index 90%
rename from src/design-system/components/dialog/Dialog.ts
rename to src/components/dialog/Dialog.ts
index ff965efb1..bf6c124bd 100644
--- a/src/design-system/components/dialog/Dialog.ts
+++ b/src/components/dialog/Dialog.ts
@@ -1,15 +1,15 @@
 import { consume } from '@lit/context'
 import { html, nothing } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
 import { property, query } from 'lit/decorators.js'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import styles from './Dialog.styles.css'
+import { customElement, WebComponent } from '@/lib/components'
 import { DialogContext, dialogContext } from '../../lib/dialogs/context'
 import { CloseDialogEvent } from '../../lib/dialogs/events/close-dialog'
 
 import '~icons/lucide/x'
-import '../dialog-header'
-import '../button'
+import '@/components/dialog-header'
+import '@/design-system/components/button'
+
+import styles from './Dialog.styles.css'
 
 @customElement('solid-ui-dialog')
 export default class Dialog extends WebComponent {
diff --git a/src/design-system/components/dialog/index.ts b/src/components/dialog/index.ts
similarity index 100%
rename from src/design-system/components/dialog/index.ts
rename to src/components/dialog/index.ts
diff --git a/src/design-system/components/dialogs-root/DialogsRoot.ts b/src/components/dialogs-root/DialogsRoot.ts
similarity index 72%
rename from src/design-system/components/dialogs-root/DialogsRoot.ts
rename to src/components/dialogs-root/DialogsRoot.ts
index e6208846c..1c468864b 100644
--- a/src/design-system/components/dialogs-root/DialogsRoot.ts
+++ b/src/components/dialogs-root/DialogsRoot.ts
@@ -1,12 +1,11 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { html } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
 import { state } from 'lit/decorators.js'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import Dialog from '../../lib/dialogs/Dialog'
-import { ShowDialogEvent } from '../../lib/dialogs/events/show-dialog'
+import Dialog from '@/lib/dialogs/Dialog'
+import { ShowDialogEvent } from '@/lib/dialogs/events/show-dialog'
+import { CloseDialogEvent } from '@/lib/dialogs/events/close-dialog'
 
-import '../dialog-provider/DialogProvider'
-import { CloseDialogEvent } from '../../lib/dialogs/events/close-dialog'
+import '@/components/dialog-provider/DialogProvider'
 
 @customElement('solid-ui-dialogs-root')
 export default class DialogsRoot extends WebComponent {
diff --git a/src/design-system/components/dialogs-root/index.ts b/src/components/dialogs-root/index.ts
similarity index 100%
rename from src/design-system/components/dialogs-root/index.ts
rename to src/components/dialogs-root/index.ts
diff --git a/src/primitives/components/guard/Guard.stories.ts b/src/components/guard/Guard.stories.ts
similarity index 76%
rename from src/primitives/components/guard/Guard.stories.ts
rename to src/components/guard/Guard.stories.ts
index dba112523..881fc8857 100644
--- a/src/primitives/components/guard/Guard.stories.ts
+++ b/src/components/guard/Guard.stories.ts
@@ -1,11 +1,11 @@
 import { html } from 'lit'
-import { defineAuthStoryRender } from '../../../storybook'
+import { defineAuthStoryRender } from '@/storybook'
 
 import './Guard'
-import { USER_OPTIONS } from '../../../storybook/stubs'
+import { USER_OPTIONS } from '@/storybook/stubs'
 
 const meta = {
-  title: 'Primitives/Guard',
+  title: 'Guard',
   args: {
     user: 'Alice',
   },
diff --git a/src/primitives/components/guard/Guard.ts b/src/components/guard/Guard.ts
similarity index 79%
rename from src/primitives/components/guard/Guard.ts
rename to src/components/guard/Guard.ts
index 80839361a..4d29dec53 100644
--- a/src/primitives/components/guard/Guard.ts
+++ b/src/components/guard/Guard.ts
@@ -1,8 +1,7 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { consume } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../lib/customElement'
-import WebComponent from '../../lib/WebComponent'
-import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '../../lib/auth/context'
+import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 
 @customElement('solid-guard')
 export default class Guard extends WebComponent {
diff --git a/src/primitives/components/guard/index.ts b/src/components/guard/index.ts
similarity index 100%
rename from src/primitives/components/guard/index.ts
rename to src/components/guard/index.ts
diff --git a/src/components/login-button/index.ts b/src/components/login-button/index.ts
new file mode 100644
index 000000000..9f51149cd
--- /dev/null
+++ b/src/components/login-button/index.ts
@@ -0,0 +1 @@
+export * from '../../v2/components/auth/loginButton'
diff --git a/src/design-system/components/login-modal/LoginModal.stories.ts b/src/components/login-modal/LoginModal.stories.ts
similarity index 81%
rename from src/design-system/components/login-modal/LoginModal.stories.ts
rename to src/components/login-modal/LoginModal.stories.ts
index fd499df79..e2528838e 100644
--- a/src/design-system/components/login-modal/LoginModal.stories.ts
+++ b/src/components/login-modal/LoginModal.stories.ts
@@ -1,14 +1,13 @@
 import { html } from 'lit'
+import { defineStoryRender, internals } from '@/storybook'
+import { showDialog } from '@/lib/dialogs'
+
+import '@/design-system/components/button'
 
-import './LoginModal'
-import './../button'
-import { defineStoryRender } from '../../../storybook'
-import { showDialog } from '../../lib/dialogs'
 import LoginModal from './LoginModal'
-import { internals } from '../../lib/internals'
 
 const meta = {
-  title: 'Design System/Login Modal',
+  title: 'Login Modal',
 } as const
 
 export default meta
diff --git a/src/design-system/components/login-modal/LoginModal.styles.css b/src/components/login-modal/LoginModal.styles.css
similarity index 84%
rename from src/design-system/components/login-modal/LoginModal.styles.css
rename to src/components/login-modal/LoginModal.styles.css
index d8b08ac78..c27632a50 100644
--- a/src/design-system/components/login-modal/LoginModal.styles.css
+++ b/src/components/login-modal/LoginModal.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 .error-message {
     color: var(--solid-ui-color-error);
     font-size: var(--solid-ui-font-size-sm);
diff --git a/src/design-system/components/login-modal/LoginModal.ts b/src/components/login-modal/LoginModal.ts
similarity index 82%
rename from src/design-system/components/login-modal/LoginModal.ts
rename to src/components/login-modal/LoginModal.ts
index 731bc41fb..4f95ed47f 100644
--- a/src/design-system/components/login-modal/LoginModal.ts
+++ b/src/components/login-modal/LoginModal.ts
@@ -1,22 +1,20 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { html, nothing } from 'lit'
 import { consume } from '@lit/context'
-import { customElement } from '../../../primitives/lib/customElement'
 import { property, query, state } from 'lit/decorators.js'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { AuthContext, authContext, DEFAULT_AUTH_CONTEXT } from '../../../primitives/lib/auth/context'
-
+import { AuthContext, authContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 import { getSuggestedIssuers } from 'solid-logic'
-
-import type Dialog from '../../../design-system/components/dialog'
-import type Combobox from '../../../design-system/components/combobox'
+import type Dialog from '@/components/dialog'
+import type Combobox from '@/design-system/components/combobox'
 
 import '~icons/lucide/chevron-down'
-import '../../../design-system/components/dialog'
-import '../../../design-system/components/dialog-content'
-import '../../../design-system/components/dialog-footer'
-import '../../../design-system/components/button'
-import '../../../design-system/components/combobox'
-import '../../../design-system/components/combobox-option'
+import '@/components/dialog'
+import '@/components/dialog-content'
+import '@/components/dialog-footer'
+import '@/design-system/components/button'
+import '@/design-system/components/combobox'
+import '@/components/combobox-option'
+
 import styles from './LoginModal.styles.css'
 
 @customElement('solid-ui-login-modal')
diff --git a/src/design-system/components/login-modal/index.ts b/src/components/login-modal/index.ts
similarity index 100%
rename from src/design-system/components/login-modal/index.ts
rename to src/components/login-modal/index.ts
diff --git a/src/primitives/components/logout-button/LogoutButton.stories.ts b/src/components/logout-button/LogoutButton.stories.ts
similarity index 64%
rename from src/primitives/components/logout-button/LogoutButton.stories.ts
rename to src/components/logout-button/LogoutButton.stories.ts
index 3b58c81ed..bda4c41e6 100644
--- a/src/primitives/components/logout-button/LogoutButton.stories.ts
+++ b/src/components/logout-button/LogoutButton.stories.ts
@@ -1,34 +1,34 @@
 import { html } from 'lit'
-import { defineStoryRender } from '../../../storybook'
+import { defineStoryRender } from '@/storybook'
 
 import '~icons/lucide/log-out'
 
 import './LogoutButton'
 
 const meta = {
-  title: 'Primitives/LogoutButton',
+  title: 'LogoutButton',
 } as const
 
 export const Primary = {
-  render: defineStoryRender(() => html`<solid-logout-button></solid-logout-button>`)
+  render: defineStoryRender(() => html`<solid-ui-logout-button></solid-ui-logout-button>`)
 }
 
 export const CustomLabel = {
   render: defineStoryRender(() => html`
-    <solid-logout-button>
+    <solid-ui-logout-button>
         Sign Out
         <icon-lucide-log-out style="width: 16px; height: 16px;"></icon-lucide-log-out>
-    </solid-logout-button>
+    </solid-ui-logout-button>
   `)
 }
 
 export const CustomTrigger = {
   render: defineStoryRender(() => html`
-    <solid-logout-button>
+    <solid-ui-logout-button>
         <button slot="trigger" type="button">
             Sign Out
         </button>
-    </solid-logout-button>
+    </solid-ui-logout-button>
   `)
 }
 
diff --git a/src/primitives/components/logout-button/LogoutButton.ts b/src/components/logout-button/LogoutButton.ts
similarity index 66%
rename from src/primitives/components/logout-button/LogoutButton.ts
rename to src/components/logout-button/LogoutButton.ts
index ac9059cc5..088cf6bbc 100644
--- a/src/primitives/components/logout-button/LogoutButton.ts
+++ b/src/components/logout-button/LogoutButton.ts
@@ -1,25 +1,23 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { consume } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../lib/customElement'
-import WebComponent from '../../lib/WebComponent'
-import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '../../lib/auth/context'
-import styles from './LogoutButton.styles.css'
+import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 
-@customElement('solid-logout-button')
-export default class LogoutButton extends WebComponent {
-  static styles = styles
+import '@/design-system/components/button'
 
+@customElement('solid-ui-logout-button')
+export default class LogoutButton extends WebComponent {
   @consume({ context: authContext, subscribe: true })
   private accessor auth: AuthContext = DEFAULT_AUTH_CONTEXT
 
   protected render () {
     return html`
       <slot name="trigger" @click=${this.onClick}>
-        <button type="button">
+        <solid-ui-button>
             <slot>
                 Log Out
             </slot>
-        </button>
+        </solid-ui-button>
       </slot>
     `
   }
diff --git a/src/primitives/components/logout-button/index.ts b/src/components/logout-button/index.ts
similarity index 100%
rename from src/primitives/components/logout-button/index.ts
rename to src/components/logout-button/index.ts
diff --git a/src/design-system/components/menu-item/MenuItem.styles.css b/src/components/menu-item/MenuItem.styles.css
similarity index 92%
rename from src/design-system/components/menu-item/MenuItem.styles.css
rename to src/components/menu-item/MenuItem.styles.css
index 3a18c1d77..17b08c56e 100644
--- a/src/design-system/components/menu-item/MenuItem.styles.css
+++ b/src/components/menu-item/MenuItem.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 a, button {
     width: 100%;
     display: flex;
diff --git a/src/design-system/components/menu-item/MenuItem.ts b/src/components/menu-item/MenuItem.ts
similarity index 85%
rename from src/design-system/components/menu-item/MenuItem.ts
rename to src/components/menu-item/MenuItem.ts
index 3e8341240..dd22453bc 100644
--- a/src/design-system/components/menu-item/MenuItem.ts
+++ b/src/components/menu-item/MenuItem.ts
@@ -1,6 +1,5 @@
-import { customElement } from '../../../primitives/lib/customElement'
+import { customElement, WebComponent } from '@/lib/components'
 import { property } from 'lit/decorators.js'
-import WebComponent from '../../../primitives/lib/WebComponent'
 import { html } from 'lit'
 
 import styles from './MenuItem.styles.css'
diff --git a/src/design-system/components/menu-item/index.ts b/src/components/menu-item/index.ts
similarity index 100%
rename from src/design-system/components/menu-item/index.ts
rename to src/components/menu-item/index.ts
diff --git a/src/design-system/components/menu-items/MenuItems.styles.css b/src/components/menu-items/MenuItems.styles.css
similarity index 94%
rename from src/design-system/components/menu-items/MenuItems.styles.css
rename to src/components/menu-items/MenuItems.styles.css
index ab5058e5d..31bb18294 100644
--- a/src/design-system/components/menu-items/MenuItems.styles.css
+++ b/src/components/menu-items/MenuItems.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 :host {
     position: fixed;
     top: calc(anchor(bottom) + 5px);
diff --git a/src/design-system/components/menu-items/MenuItems.ts b/src/components/menu-items/MenuItems.ts
similarity index 77%
rename from src/design-system/components/menu-items/MenuItems.ts
rename to src/components/menu-items/MenuItems.ts
index 7ac13b1e8..cb31b610a 100644
--- a/src/design-system/components/menu-items/MenuItems.ts
+++ b/src/components/menu-items/MenuItems.ts
@@ -1,8 +1,7 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { consume } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { menuContext, MenuContext } from '../../lib/menus/context'
+import { menuContext, MenuContext } from '@/lib/menus/context'
 
 import styles from './MenuItems.styles.css'
 
diff --git a/src/design-system/components/menu-items/index.ts b/src/components/menu-items/index.ts
similarity index 100%
rename from src/design-system/components/menu-items/index.ts
rename to src/components/menu-items/index.ts
diff --git a/src/design-system/components/menu/Menu.stories.ts b/src/components/menu/Menu.stories.ts
similarity index 79%
rename from src/design-system/components/menu/Menu.stories.ts
rename to src/components/menu/Menu.stories.ts
index ee1430cbb..6e846ce70 100644
--- a/src/design-system/components/menu/Menu.stories.ts
+++ b/src/components/menu/Menu.stories.ts
@@ -1,13 +1,14 @@
 import { html } from 'lit'
+import { defineStoryRender } from '@/storybook'
+
+import '@/design-system/components/button'
+import '@/components/menu-item'
+import '@/components/menu-items'
 
 import './Menu'
-import './../menu-item'
-import './../menu-items'
-import './../button'
-import { defineStoryRender } from '../../../storybook'
 
 const meta = {
-  title: 'Design System/Menu',
+  title: 'Menu',
 } as const
 
 const render = defineStoryRender(() => html`
diff --git a/src/design-system/components/menu/Menu.ts b/src/components/menu/Menu.ts
similarity index 87%
rename from src/design-system/components/menu/Menu.ts
rename to src/components/menu/Menu.ts
index 6a0762267..c1d14070f 100644
--- a/src/design-system/components/menu/Menu.ts
+++ b/src/components/menu/Menu.ts
@@ -1,11 +1,9 @@
+import { customElement, WebComponent, generateId } from '@/lib/components'
 import { provide } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
 import { queryAssignedElements } from 'lit/decorators.js'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import MenuItems from '../menu-items'
-import { MenuContext, menuContext } from '../../lib/menus/context'
-import { generateId } from '../../lib/ids'
+import { MenuContext, menuContext } from '@/lib/menus/context'
+import type MenuItems from '@/components/menu-items'
 
 @customElement('solid-ui-menu')
 export default class Menu extends WebComponent {
diff --git a/src/design-system/components/menu/index.ts b/src/components/menu/index.ts
similarity index 100%
rename from src/design-system/components/menu/index.ts
rename to src/components/menu/index.ts
diff --git a/src/design-system/components/provider/Provider.ts b/src/components/provider/Provider.ts
similarity index 70%
rename from src/design-system/components/provider/Provider.ts
rename to src/components/provider/Provider.ts
index 2b9ad143e..9786e4f72 100644
--- a/src/design-system/components/provider/Provider.ts
+++ b/src/components/provider/Provider.ts
@@ -1,12 +1,11 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { provide } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
 import { property } from 'lit/decorators.js'
-import { authContext } from '../../../primitives/lib/auth/context'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import SolidAuth, { DEFAULT_SIGNUP_URL } from '../../lib/auth/SolidAuth'
+import { authContext } from '@/lib/auth'
+import { SolidAuth, DEFAULT_SIGNUP_URL } from '@/lib/auth'
 
-import '../dialogs-root'
+import '@/components/dialogs-root'
 
 @customElement('solid-ui-provider')
 export default class Provider extends WebComponent {
diff --git a/src/design-system/components/provider/index.ts b/src/components/provider/index.ts
similarity index 100%
rename from src/design-system/components/provider/index.ts
rename to src/components/provider/index.ts
diff --git a/src/components/signup-button/index.ts b/src/components/signup-button/index.ts
new file mode 100644
index 000000000..2abd97231
--- /dev/null
+++ b/src/components/signup-button/index.ts
@@ -0,0 +1 @@
+export * from '../../v2/components/auth/signupButton'
diff --git a/src/design-system/components/button/Button.stories.ts b/src/design-system/components/button/Button.stories.ts
index 8a14fbcd2..403a66471 100644
--- a/src/design-system/components/button/Button.stories.ts
+++ b/src/design-system/components/button/Button.stories.ts
@@ -1,11 +1,12 @@
 import { html, nothing } from 'lit'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
-import { defineControlOptions, defineStoryRender } from '../../../storybook'
+import { defineControlOptions, defineStoryRender } from '@/storybook'
 
 import '~icons/lucide/check'
 import '~icons/lucide/plus'
 import '~icons/lucide/log-in'
 import '~icons/lucide/help-circle'
+
 import { BUTTON_VARIANTS } from './Button'
 
 const ICON_OPTIONS = defineControlOptions([
@@ -17,7 +18,7 @@ const ICON_OPTIONS = defineControlOptions([
 ])
 
 const meta = {
-  title: 'Design System/Button',
+  title: 'Button',
   args: {
     text: 'Save Changes',
     title: '',
diff --git a/src/design-system/components/button/Button.styles.css b/src/design-system/components/button/Button.styles.css
index a8dd0912a..da02cbd8f 100644
--- a/src/design-system/components/button/Button.styles.css
+++ b/src/design-system/components/button/Button.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 :host {
     --text-color: var(--solid-ui-color-white);
     --border-color: var(--solid-ui-color-primary);
diff --git a/src/design-system/components/button/Button.ts b/src/design-system/components/button/Button.ts
index 64f6da9d3..8f5e123c0 100644
--- a/src/design-system/components/button/Button.ts
+++ b/src/design-system/components/button/Button.ts
@@ -1,11 +1,11 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { html, nothing } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
 import { property } from 'lit/decorators.js'
-import styles from './Button.styles.css'
-import WebComponent from '../../../primitives/lib/WebComponent'
 
 import '~icons/svg-spinners/180-ring'
 
+import styles from './Button.styles.css'
+
 export const BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary', 'outline', 'ghost'] as const
 export type ButtonVariant = typeof BUTTON_VARIANTS[number]
 
diff --git a/src/design-system/components/combobox/Combobox.stories.ts b/src/design-system/components/combobox/Combobox.stories.ts
index 4ac68ccbc..ba22c9085 100644
--- a/src/design-system/components/combobox/Combobox.stories.ts
+++ b/src/design-system/components/combobox/Combobox.stories.ts
@@ -1,11 +1,12 @@
 import { html } from 'lit'
+import { defineStoryRender } from '@/storybook'
+
+import '@/components/combobox-option'
 
 import './Combobox'
-import '../combobox-option'
-import { defineStoryRender } from '../../../storybook'
 
 const meta = {
-  title: 'Design System/Combobox',
+  title: 'Combobox',
   args: {
     label: 'What is the best food?',
     options: 'Pizza, Ramen, Tacos'
diff --git a/src/design-system/components/combobox/Combobox.styles.css b/src/design-system/components/combobox/Combobox.styles.css
index 4aa02dfd4..c453ec80b 100644
--- a/src/design-system/components/combobox/Combobox.styles.css
+++ b/src/design-system/components/combobox/Combobox.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 :host {
     display: inline-flex;
     flex-direction: column;
@@ -9,7 +7,7 @@
     label {
         color: var(--solid-ui-color-gray-600);
         font-size: var(--solid-ui-font-size-sm);
-        font-weight: 500;
+        font-weight: 400;
     }
 
     .input-wrapper {
diff --git a/src/design-system/components/combobox/Combobox.ts b/src/design-system/components/combobox/Combobox.ts
index 083e7dcc7..b7d58ca2e 100644
--- a/src/design-system/components/combobox/Combobox.ts
+++ b/src/design-system/components/combobox/Combobox.ts
@@ -1,13 +1,12 @@
 import { html } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
 import { property, query, state } from 'lit/decorators.js'
-import WebComponent from '../../../primitives/lib/WebComponent'
+import { generateId, WebComponent, customElement } from '@/lib/components'
+import ComboboxOption from '@/components/combobox-option/ComboboxOption'
 
-import styles from './Combobox.styles.css'
-import { generateId } from '../../lib/ids'
-import ComboboxOption from '../combobox-option/ComboboxOption'
 import '~icons/lucide/chevron-down'
 
+import styles from './Combobox.styles.css'
+
 @customElement('solid-ui-combobox')
 export default class Combobox extends WebComponent {
   static styles = styles
diff --git a/src/primitives/components/login-button/LoginButton.stories.ts b/src/design-system/components/login-button/LoginButton.stories.ts
similarity index 64%
rename from src/primitives/components/login-button/LoginButton.stories.ts
rename to src/design-system/components/login-button/LoginButton.stories.ts
index 72fdc9326..733ecd8d7 100644
--- a/src/primitives/components/login-button/LoginButton.stories.ts
+++ b/src/design-system/components/login-button/LoginButton.stories.ts
@@ -1,34 +1,34 @@
 import { html } from 'lit'
-import { defineStoryRender } from '../../../storybook'
+import { defineStoryRender } from '@/storybook'
 
 import '~icons/lucide/log-in'
 
 import './LoginButton'
 
 const meta = {
-  title: 'Primitives/LoginButton',
+  title: 'LoginButton',
 } as const
 
 export const Primary = {
-  render: defineStoryRender(() => html`<solid-login-button></solid-login-button>`)
+  render: defineStoryRender(() => html`<solid-ui-login-button></solid-ui-login-button>`)
 }
 
 export const CustomLabel = {
   render: defineStoryRender(() => html`
-    <solid-login-button>
+    <solid-ui-login-button>
         Sign In
         <icon-lucide-log-in style="width: 16px; height: 16px;"></icon-lucide-log-in>
-    </solid-login-button>
+    </solid-ui-login-button>
   `)
 }
 
 export const CustomTrigger = {
   render: defineStoryRender(() => html`
-    <solid-login-button>
+    <solid-ui-login-button>
         <button slot="trigger" type="button">
             Sign In
         </button>
-    </solid-login-button>
+    </solid-ui-login-button>
   `)
 }
 
diff --git a/src/primitives/components/login-button/LoginButton.ts b/src/design-system/components/login-button/LoginButton.ts
similarity index 66%
rename from src/primitives/components/login-button/LoginButton.ts
rename to src/design-system/components/login-button/LoginButton.ts
index 4808bcfa9..7fa68a5e7 100644
--- a/src/primitives/components/login-button/LoginButton.ts
+++ b/src/design-system/components/login-button/LoginButton.ts
@@ -1,25 +1,23 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { consume } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../lib/customElement'
-import WebComponent from '../../lib/WebComponent'
-import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '../../lib/auth/context'
-import styles from './LoginButton.styles.css'
+import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 
-@customElement('solid-login-button')
-export default class LoginButton extends WebComponent {
-  static styles = styles
+import '@/design-system/components/button'
 
+@customElement('solid-ui-login-button')
+export default class LoginButton extends WebComponent {
   @consume({ context: authContext, subscribe: true })
   private accessor auth: AuthContext = DEFAULT_AUTH_CONTEXT
 
   protected render () {
     return html`
       <slot name="trigger" @click=${this.onClick}>
-        <button type="button">
+        <solid-ui-button>
             <slot>
                 Log In
             </slot>
-        </button>
+        </solid-ui-button>
       </slot>
     `
   }
diff --git a/src/primitives/components/login-button/index.ts b/src/design-system/components/login-button/index.ts
similarity index 100%
rename from src/primitives/components/login-button/index.ts
rename to src/design-system/components/login-button/index.ts
diff --git a/src/primitives/components/signup-button/SignupButton.stories.ts b/src/design-system/components/signup-button/SignupButton.stories.ts
similarity index 64%
rename from src/primitives/components/signup-button/SignupButton.stories.ts
rename to src/design-system/components/signup-button/SignupButton.stories.ts
index 4f684814c..4631f1350 100644
--- a/src/primitives/components/signup-button/SignupButton.stories.ts
+++ b/src/design-system/components/signup-button/SignupButton.stories.ts
@@ -1,34 +1,34 @@
 import { html } from 'lit'
-import { defineStoryRender } from '../../../storybook'
+import { defineStoryRender } from '@/storybook'
 
 import '~icons/lucide/user-plus'
 
 import './SignupButton'
 
 const meta = {
-  title: 'Primitives/SignupButton',
+  title: 'SignupButton',
 } as const
 
 export const Primary = {
-  render: defineStoryRender(() => html`<solid-signup-button></solid-signup-button>`)
+  render: defineStoryRender(() => html`<solid-ui-signup-button></solid-ui-signup-button>`)
 }
 
 export const CustomLabel = {
   render: defineStoryRender(() => html`
-    <solid-signup-button>
+    <solid-ui-signup-button>
        Register
         <icon-lucide-user-plus style="width: 16px; height: 16px;"></icon-lucide-user-plus>
-    </solid-signup-button>
+    </solid-ui-signup-button>
   `)
 }
 
 export const CustomTrigger = {
   render: defineStoryRender(() => html`
-    <solid-signup-button>
+    <solid-ui-signup-button>
         <button slot="trigger" type="button">
            Register
         </button>
-    </solid-signup-button>
+    </solid-ui-signup-button>
   `)
 }
 
diff --git a/src/primitives/components/signup-button/SignupButton.ts b/src/design-system/components/signup-button/SignupButton.ts
similarity index 66%
rename from src/primitives/components/signup-button/SignupButton.ts
rename to src/design-system/components/signup-button/SignupButton.ts
index 5ed2f7b75..5992b0e0a 100644
--- a/src/primitives/components/signup-button/SignupButton.ts
+++ b/src/design-system/components/signup-button/SignupButton.ts
@@ -1,25 +1,23 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { consume } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../lib/customElement'
-import WebComponent from '../../lib/WebComponent'
-import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '../../lib/auth/context'
-import styles from './SignupButton.styles.css'
+import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 
-@customElement('solid-signup-button')
-export default class SignupButton extends WebComponent {
-  static styles = styles
+import '@/design-system/components/button'
 
+@customElement('solid-ui-signup-button')
+export default class SignupButton extends WebComponent {
   @consume({ context: authContext, subscribe: true })
   private accessor auth: AuthContext = DEFAULT_AUTH_CONTEXT
 
   protected render () {
     return html`
       <slot name="trigger" @click=${this.onClick}>
-        <button type="button">
+        <solid-ui-button>
             <slot>
                 Sign Up
             </slot>
-        </button>
+        </solid-ui-button>
       </slot>
     `
   }
diff --git a/src/primitives/components/signup-button/index.ts b/src/design-system/components/signup-button/index.ts
similarity index 100%
rename from src/primitives/components/signup-button/index.ts
rename to src/design-system/components/signup-button/index.ts
diff --git a/src/design-system/shims.d.ts b/src/design-system/shims.d.ts
deleted file mode 100644
index 0a15fbeb1..000000000
--- a/src/design-system/shims.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module '*.styles.css' {
-  import { CSSResult } from 'lit'
-
-  const content: CSSResult
-  export default content
-}
diff --git a/src/design-system/styles/common.styles.css b/src/design-system/styles/common.styles.css
deleted file mode 100644
index 6def71d0d..000000000
--- a/src/design-system/styles/common.styles.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "tailwindcss/preflight.css";
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
diff --git a/src/design-system/styles/variables.css b/src/design-system/styles/variables.css
deleted file mode 100644
index a6313a305..000000000
--- a/src/design-system/styles/variables.css
+++ /dev/null
@@ -1,27 +0,0 @@
-:root {
-  --solid-ui-color-primary: #7c4dff;
-  --solid-ui-color-tertiary: #083575;
-  --solid-ui-color-white: #ffffff;
-  --solid-ui-color-error: #b00020;
-
-  --solid-ui-color-gray-100: #f3f4f6;
-  --solid-ui-color-gray-400: #99a1af;
-  --solid-ui-color-gray-500: #6a7282;
-  --solid-ui-color-gray-600: #4a5565;
-  --solid-ui-color-gray-700: #364153;
-  --solid-ui-color-gray-800: #101828;
-
-  --solid-ui-color-slate-50: #f8fafc;
-  --solid-ui-color-slate-200: #e2e8f0;
-  --solid-ui-color-slate-400: #90a1b9;
-
-  --solid-ui-color-body-grey: #666;
-
-  --solid-ui-font-size-sm: 0.875rem; /* 14px */
-  --solid-ui-font-size-md: 1rem; /* 16px */
-  --solid-ui-font-size-lg: 1.125rem; /* 18px */
-  --solid-ui-font-size-xl: 1.25rem; /* 20px */
-  --solid-ui-font-size-2xl: 1.5rem; /* 24px */
-
-  --solid-ui-clickable-area: 42px;
-}
diff --git a/src/index.ts b/src/index.ts
index f6b2563ed..4449133b0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -62,3 +62,8 @@ export {
 }
 // uses in solid-panes
 export type { CreateContext, NewAppInstanceOptions } from './create/types'
+
+export * from './lib/auth'
+export * from './lib/components'
+export * from './lib/dialogs'
+export * from './lib/menus'
diff --git a/src/primitives/lib/auth/Account.ts b/src/lib/auth/Account.ts
similarity index 100%
rename from src/primitives/lib/auth/Account.ts
rename to src/lib/auth/Account.ts
diff --git a/src/primitives/lib/auth/NoopAuth.ts b/src/lib/auth/NoopAuth.ts
similarity index 100%
rename from src/primitives/lib/auth/NoopAuth.ts
rename to src/lib/auth/NoopAuth.ts
diff --git a/src/design-system/lib/auth/SolidAuth.ts b/src/lib/auth/SolidAuth.ts
similarity index 92%
rename from src/design-system/lib/auth/SolidAuth.ts
rename to src/lib/auth/SolidAuth.ts
index 2f076efcf..ef16e2c18 100644
--- a/src/design-system/lib/auth/SolidAuth.ts
+++ b/src/lib/auth/SolidAuth.ts
@@ -1,11 +1,11 @@
 import { authSession, solidLogicSingleton } from 'solid-logic'
-import Account from '../../../primitives/lib/auth/Account'
-import { AuthContext } from '../../../primitives/lib/auth/context'
-import { showDialog } from '../dialogs'
+import Account from '@/lib/auth/Account'
+import { AuthContext } from '@/lib/auth'
+import { showDialog } from '@/lib/dialogs'
 import { html } from 'lit'
-import ns from '../../../lib/ns'
+import ns from '@/lib/ns'
 
-import '../../components/login-modal'
+import '@/components/login-modal'
 
 export const DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod'
 
diff --git a/src/primitives/lib/auth/context.ts b/src/lib/auth/context.ts
similarity index 100%
rename from src/primitives/lib/auth/context.ts
rename to src/lib/auth/context.ts
diff --git a/src/lib/auth/index.ts b/src/lib/auth/index.ts
new file mode 100644
index 000000000..7dd86f55c
--- /dev/null
+++ b/src/lib/auth/index.ts
@@ -0,0 +1,8 @@
+export * from './Account'
+export * from './context'
+export * from './NoopAuth'
+export * from './SolidAuth'
+
+export { default as Account } from './Account'
+export { default as NoopAuth } from './NoopAuth'
+export { default as SolidAuth } from './SolidAuth'
diff --git a/src/primitives/lib/customElement.ts b/src/lib/components/decorators.ts
similarity index 100%
rename from src/primitives/lib/customElement.ts
rename to src/lib/components/decorators.ts
diff --git a/src/design-system/lib/ids.ts b/src/lib/components/ids.ts
similarity index 100%
rename from src/design-system/lib/ids.ts
rename to src/lib/components/ids.ts
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
new file mode 100644
index 000000000..bfaab7422
--- /dev/null
+++ b/src/lib/components/index.ts
@@ -0,0 +1,3 @@
+export * from './decorators'
+export * from './ids'
+export * from './web-component'
diff --git a/src/lib/components/web-component/WebComponent.styles.css b/src/lib/components/web-component/WebComponent.styles.css
new file mode 100644
index 000000000..dc374f742
--- /dev/null
+++ b/src/lib/components/web-component/WebComponent.styles.css
@@ -0,0 +1,13 @@
+@import 'tailwindcss/preflight.css';
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
diff --git a/src/primitives/lib/WebComponent.ts b/src/lib/components/web-component/WebComponent.ts
similarity index 84%
rename from src/primitives/lib/WebComponent.ts
rename to src/lib/components/web-component/WebComponent.ts
index 0966082cc..407755ae4 100644
--- a/src/primitives/lib/WebComponent.ts
+++ b/src/lib/components/web-component/WebComponent.ts
@@ -1,8 +1,16 @@
-import { html, LitElement } from 'lit'
+import { html, LitElement, type CSSResultGroup } from 'lit'
+
+import styles from './WebComponent.styles.css'
 
 export default abstract class WebComponent extends LitElement {
   static states?: Record<string, Function>
 
+  protected static finalizeStyles (componentStyles?: CSSResultGroup) {
+    const elementStyles = super.finalizeStyles(componentStyles)
+
+    return [styles, ...elementStyles]
+  }
+
   protected internals?: ElementInternals
   protected globalListeners: [type: string, listener: EventListener][] = []
 
diff --git a/src/lib/components/web-component/index.ts b/src/lib/components/web-component/index.ts
new file mode 100644
index 000000000..619850198
--- /dev/null
+++ b/src/lib/components/web-component/index.ts
@@ -0,0 +1,4 @@
+import WebComponent from './WebComponent'
+
+export { WebComponent }
+export default WebComponent
diff --git a/src/design-system/lib/dialogs/Dialog.ts b/src/lib/dialogs/Dialog.ts
similarity index 91%
rename from src/design-system/lib/dialogs/Dialog.ts
rename to src/lib/dialogs/Dialog.ts
index ea192aa42..85e30b181 100644
--- a/src/design-system/lib/dialogs/Dialog.ts
+++ b/src/lib/dialogs/Dialog.ts
@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit'
-import { generateId } from '../ids'
+import { generateId } from '@/lib/components'
 
 export default class Dialog {
   public readonly id: string
diff --git a/src/design-system/lib/dialogs/context.ts b/src/lib/dialogs/context.ts
similarity index 100%
rename from src/design-system/lib/dialogs/context.ts
rename to src/lib/dialogs/context.ts
diff --git a/src/design-system/lib/dialogs/events/close-dialog.ts b/src/lib/dialogs/events/close-dialog.ts
similarity index 100%
rename from src/design-system/lib/dialogs/events/close-dialog.ts
rename to src/lib/dialogs/events/close-dialog.ts
diff --git a/src/lib/dialogs/events/index.ts b/src/lib/dialogs/events/index.ts
new file mode 100644
index 000000000..d060f09b3
--- /dev/null
+++ b/src/lib/dialogs/events/index.ts
@@ -0,0 +1,2 @@
+export * from './close-dialog'
+export * from './show-dialog'
diff --git a/src/design-system/lib/dialogs/events/show-dialog.ts b/src/lib/dialogs/events/show-dialog.ts
similarity index 100%
rename from src/design-system/lib/dialogs/events/show-dialog.ts
rename to src/lib/dialogs/events/show-dialog.ts
diff --git a/src/design-system/lib/dialogs/index.ts b/src/lib/dialogs/helpers.ts
similarity index 100%
rename from src/design-system/lib/dialogs/index.ts
rename to src/lib/dialogs/helpers.ts
diff --git a/src/lib/dialogs/index.ts b/src/lib/dialogs/index.ts
new file mode 100644
index 000000000..86bba5451
--- /dev/null
+++ b/src/lib/dialogs/index.ts
@@ -0,0 +1,6 @@
+export * from './context'
+export * from './Dialog'
+export * from './events'
+export * from './helpers'
+
+export { default as Dialog } from './Dialog'
diff --git a/src/lib/env.d.ts b/src/lib/env.d.ts
deleted file mode 100644
index 11f02fe2a..000000000
--- a/src/lib/env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/src/lib/features.ts b/src/lib/features.ts
index f1bbc610a..b8656f93a 100644
--- a/src/lib/features.ts
+++ b/src/lib/features.ts
@@ -3,7 +3,7 @@
  */
 
 const Features = {
-  DESIGN_SYSTEM_HEADER_ACCOUNT: true,
+  DESIGN_SYSTEM_HEADER_ACCOUNT: false,
 }
 
 export default Features
diff --git a/src/design-system/lib/menus/context.ts b/src/lib/menus/context.ts
similarity index 100%
rename from src/design-system/lib/menus/context.ts
rename to src/lib/menus/context.ts
diff --git a/src/lib/menus/index.ts b/src/lib/menus/index.ts
new file mode 100644
index 000000000..630b4d7e7
--- /dev/null
+++ b/src/lib/menus/index.ts
@@ -0,0 +1 @@
+export * from './context'
diff --git a/src/primitives/components/login-button/LoginButton.styles.css b/src/primitives/components/login-button/LoginButton.styles.css
deleted file mode 100644
index 328931896..000000000
--- a/src/primitives/components/login-button/LoginButton.styles.css
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/common.styles.css';
diff --git a/src/primitives/components/logout-button/LogoutButton.styles.css b/src/primitives/components/logout-button/LogoutButton.styles.css
deleted file mode 100644
index 328931896..000000000
--- a/src/primitives/components/logout-button/LogoutButton.styles.css
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/common.styles.css';
diff --git a/src/primitives/components/signup-button/SignupButton.styles.css b/src/primitives/components/signup-button/SignupButton.styles.css
deleted file mode 100644
index 328931896..000000000
--- a/src/primitives/components/signup-button/SignupButton.styles.css
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/common.styles.css';
diff --git a/src/primitives/styles/common.styles.css b/src/primitives/styles/common.styles.css
deleted file mode 100644
index 454db61a0..000000000
--- a/src/primitives/styles/common.styles.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@import 'tailwindcss/preflight.css';
-
-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px 20px;
-    border-radius: 5px;
-    gap: 5px;
-    background: var(--solid-color-primary);
-    color: var(--solid-color-primary-foreground);
-
-    &:hover {
-        background: var(--solid-color-primary-hover);
-        border-color: var(--solid-color-primary-hover);
-    }
-}
diff --git a/src/primitives/styles/variables.css b/src/primitives/styles/variables.css
deleted file mode 100644
index 96e061b4c..000000000
--- a/src/primitives/styles/variables.css
+++ /dev/null
@@ -1,7 +0,0 @@
-:root {
-    --solid-color-gray-100: #f8fafc;
-    --solid-color-gray-200: #cbd5e1;
-    --solid-color-primary: #7c4dff;
-    --solid-color-primary-foreground: #ffffff;
-    --solid-color-primary-hover: #6a3de8;
-}
diff --git a/src/storybook/auth/StorybookAuth.ts b/src/storybook/auth/StorybookAuth.ts
index b611d3d85..291004bc6 100644
--- a/src/storybook/auth/StorybookAuth.ts
+++ b/src/storybook/auth/StorybookAuth.ts
@@ -1,5 +1,4 @@
-import { AuthContext } from '../../primitives/lib/auth/context'
-import Account from '../../primitives/lib/auth/Account'
+import { Account, AuthContext } from '@/lib/auth'
 
 export default class StorybookAuth implements AuthContext {
   public account: Account | null = null
diff --git a/src/storybook/components/StorybookProvider.ts b/src/storybook/components/StorybookProvider.ts
index 75193011b..b34d4391c 100644
--- a/src/storybook/components/StorybookProvider.ts
+++ b/src/storybook/components/StorybookProvider.ts
@@ -1,13 +1,11 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { provide } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../primitives/lib/customElement'
 import { property } from 'lit/decorators.js'
 import StorybookAuth from '../auth/StorybookAuth'
-import Account from '../../primitives/lib/auth/Account'
-import { authContext } from '../../primitives/lib/auth/context'
-import WebComponent from '../../primitives/lib/WebComponent'
+import { Account, authContext } from '@/lib/auth'
 
-import '../../design-system/components/dialogs-root'
+import '@/components/dialogs-root'
 
 @customElement('storybook-provider')
 export class StorybookProvider extends WebComponent {
diff --git a/src/storybook/helpers.ts b/src/storybook/helpers.ts
new file mode 100644
index 000000000..c1fa21033
--- /dev/null
+++ b/src/storybook/helpers.ts
@@ -0,0 +1,46 @@
+import { html, render, TemplateResult } from 'lit'
+import { USER_OPTIONS, users } from './stubs'
+
+import './components/StorybookProvider'
+
+export type ControlOptions<TLabel extends string = string, TValue = unknown> = [TLabel, TValue][]
+
+export type GetStoryArgs<T extends object> = {
+  [K in keyof T]: T[K] extends { options: ArrayLike<infer TValue> } ? TValue : T[K] extends { control: 'text' } ? string : never
+}
+
+function renderStorybook (content: TemplateResult, user: ReturnType<typeof USER_OPTIONS.resolve> = null) {
+  const container = document.createElement('div')
+
+  render(html`
+        <storybook-provider webId="${user?.webId}" avatarUrl="${user?.avatarUrl}">
+            ${content}
+        </storybook-provider>
+    `, container)
+
+  return container
+}
+
+export function defineStoryRender<T extends object> (renderStory: (args: GetStoryArgs<T>) => TemplateResult) {
+  return (args: GetStoryArgs<T>) => renderStorybook(renderStory(args))
+}
+
+export function defineAuthStoryRender<T extends { user: typeof USER_OPTIONS.control }> (renderStory: (args: GetStoryArgs<T>) => TemplateResult) {
+  return (args: GetStoryArgs<T>) => {
+    const resolvedUser = USER_OPTIONS.resolve(args.user as keyof typeof users)
+
+    return renderStorybook(renderStory(args), resolvedUser)
+  }
+}
+
+export function defineControlOptions<const T extends ControlOptions> (options: T) {
+  return {
+    control: {
+      type: 'select',
+      options: options.map(([label]) => label) as T[number][0][],
+    },
+    resolve (value: T[number][0]) {
+      return options.find(([label]) => label === value)?.[1] as T[number][1]
+    }
+  }
+}
diff --git a/src/storybook/index.ts b/src/storybook/index.ts
index c1fa21033..8a90ee6fb 100644
--- a/src/storybook/index.ts
+++ b/src/storybook/index.ts
@@ -1,46 +1,3 @@
-import { html, render, TemplateResult } from 'lit'
-import { USER_OPTIONS, users } from './stubs'
-
-import './components/StorybookProvider'
-
-export type ControlOptions<TLabel extends string = string, TValue = unknown> = [TLabel, TValue][]
-
-export type GetStoryArgs<T extends object> = {
-  [K in keyof T]: T[K] extends { options: ArrayLike<infer TValue> } ? TValue : T[K] extends { control: 'text' } ? string : never
-}
-
-function renderStorybook (content: TemplateResult, user: ReturnType<typeof USER_OPTIONS.resolve> = null) {
-  const container = document.createElement('div')
-
-  render(html`
-        <storybook-provider webId="${user?.webId}" avatarUrl="${user?.avatarUrl}">
-            ${content}
-        </storybook-provider>
-    `, container)
-
-  return container
-}
-
-export function defineStoryRender<T extends object> (renderStory: (args: GetStoryArgs<T>) => TemplateResult) {
-  return (args: GetStoryArgs<T>) => renderStorybook(renderStory(args))
-}
-
-export function defineAuthStoryRender<T extends { user: typeof USER_OPTIONS.control }> (renderStory: (args: GetStoryArgs<T>) => TemplateResult) {
-  return (args: GetStoryArgs<T>) => {
-    const resolvedUser = USER_OPTIONS.resolve(args.user as keyof typeof users)
-
-    return renderStorybook(renderStory(args), resolvedUser)
-  }
-}
-
-export function defineControlOptions<const T extends ControlOptions> (options: T) {
-  return {
-    control: {
-      type: 'select',
-      options: options.map(([label]) => label) as T[number][0][],
-    },
-    resolve (value: T[number][0]) {
-      return options.find(([label]) => label === value)?.[1] as T[number][1]
-    }
-  }
-}
+export * from './helpers'
+export * from './internals'
+export * from './stubs'
diff --git a/src/design-system/lib/internals.ts b/src/storybook/internals.ts
similarity index 100%
rename from src/design-system/lib/internals.ts
rename to src/storybook/internals.ts
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index a4758b772..000000000
--- a/src/styles.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './design-system/styles/variables.css';
-@import './primitives/styles/variables.css';
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 000000000..1382bd5ac
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,31 @@
+:root {
+    --solid-ui-color-primary: #7c4dff;
+    --solid-ui-color-tertiary: #083575;
+    --solid-ui-color-white: #ffffff;
+    --solid-ui-color-error: #b00020;
+
+    --solid-ui-color-gray-100: #f3f4f6;
+    --solid-ui-color-gray-200: #cbd5e1;
+    --solid-ui-color-gray-400: #99a1af;
+    --solid-ui-color-gray-500: #6a7282;
+    --solid-ui-color-gray-600: #4a5565;
+    --solid-ui-color-gray-700: #364153;
+    --solid-ui-color-gray-800: #101828;
+
+    --solid-ui-color-slate-50: #f8fafc;
+    --solid-ui-color-slate-200: #e2e8f0;
+    --solid-ui-color-slate-400: #90a1b9;
+
+    --solid-ui-color-red-500: #fb2c36;
+
+    --solid-ui-color-body-grey: #666;
+
+    --solid-ui-font-size-xs: 0.75rem;  /* 12px */
+    --solid-ui-font-size-sm: 0.875rem; /* 14px */
+    --solid-ui-font-size-md: 1rem;     /* 16px */
+    --solid-ui-font-size-lg: 1.125rem; /* 18px */
+    --solid-ui-font-size-xl: 1.25rem;  /* 20px */
+    --solid-ui-font-size-2xl: 1.5rem;  /* 24px */
+
+    --solid-ui-clickable-area: 42px;
+}
diff --git a/src/types/env.d.ts b/src/types/env.d.ts
new file mode 100644
index 000000000..27830eb3d
--- /dev/null
+++ b/src/types/env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-lit-css/client" />
+/// <reference types="unplugin-icons/types/web-components" />
diff --git a/src/design-system/polyfills/css-anchor-positioning.ts b/src/types/polyfills.d.ts
similarity index 100%
rename from src/design-system/polyfills/css-anchor-positioning.ts
rename to src/types/polyfills.d.ts
diff --git a/src/v2/components/layout/header/Header.ts b/src/v2/components/layout/header/Header.ts
index 6fac45745..b4142cd5d 100644
--- a/src/v2/components/layout/header/Header.ts
+++ b/src/v2/components/layout/header/Header.ts
@@ -5,8 +5,6 @@ import '../../auth/loginButton/index'
 import '../../auth/signupButton/index'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
-import '../../../../design-system/components/account'
-import '../../../../design-system/components/provider'
 import Features from '../../../../lib/features'
 
 const DEFAULT_HELP_MENU_ICON = ''
diff --git a/test/helpers/setup.ts b/test/helpers/setup.ts
index a3ca15823..7452da210 100644
--- a/test/helpers/setup.ts
+++ b/test/helpers/setup.ts
@@ -1,5 +1,5 @@
-import '../../src/design-system/shims.d.ts'
-import '../../src/design-system/polyfills/css-anchor-positioning'
+import '@/types/env.d.ts'
+import '@/types/polyfills.d.ts'
 
 import { expect, vi } from 'vitest'
 import { toContainGraph } from '../custom-matchers/toContainGraph'
diff --git a/test/unit/index.test.ts b/test/unit/index.test.ts
index d7b40c47d..31af3a3f3 100644
--- a/test/unit/index.test.ts
+++ b/test/unit/index.test.ts
@@ -7,11 +7,24 @@ silenceDebugMessages()
 describe('Index', () => {
   it('exists', () => {
     expect(Object.keys(Index).sort()).toEqual([
+      'Account',
+      'CloseDialogEvent',
+      'DEFAULT_AUTH_CONTEXT',
+      'DEFAULT_SIGNUP_URL',
+      'Dialog',
+      'NoopAuth',
+      'ShowDialogEvent',
+      'SolidAuth',
+      'WebComponent',
       'acl',
       'aclControl',
+      'authContext',
       'create',
       'createTypes',
+      'customElement',
+      'dialogContext',
       'dom',
+      'generateId',
       'icons',
       'infiniteMessageArea',
       'initFooter',
@@ -21,11 +34,13 @@ describe('Index', () => {
       'login',
       'matrix',
       'media',
+      'menuContext',
       'messageArea',
       'ns',
       'pad',
       'participation',
       'preferences',
+      'showDialog',
       'style',
       'table',
       'tabs',
diff --git a/tsconfig.json b/tsconfig.json
index 8fde9262b..c2dad8cfd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -53,8 +53,10 @@
 
     /* Module Resolution Options */
     // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     "typeRoots": [
diff --git a/vite-config/babel.ts b/vite-config/babel.ts
index ca4f74aa8..572aa9394 100644
--- a/vite-config/babel.ts
+++ b/vite-config/babel.ts
@@ -30,8 +30,8 @@ export default function (options: {
             // See https://lit.dev/docs/components/decorators/#using-decorators-with-babel
             {
                 include: [
+                    'src/components',
                     'src/design-system',
-                    'src/primitives',
                     'src/storybook',
                 ],
                 assumptions: { setPublicClassFields: false },
diff --git a/vite-config/cdn.ts b/vite-config/cdn.ts
index 0efe1ec30..eef3e130b 100644
--- a/vite-config/cdn.ts
+++ b/vite-config/cdn.ts
@@ -21,6 +21,7 @@ function cdnSharedConfig(options: { basePlugins: PluginOption[]; globals?: Recor
 
     return {
         resolve: {
+            tsconfigPaths: true,
             alias: {
                 path: 'path-browserify',
             },
diff --git a/vite-config/styles.ts b/vite-config/styles.ts
index 94ef0fb83..dbe7bb949 100644
--- a/vite-config/styles.ts
+++ b/vite-config/styles.ts
@@ -11,9 +11,9 @@ export function stylesConfig(): UserConfig {
             emptyOutDir: false,
             cssMinify: true,
             rolldownOptions: {
-                input: resolve(projectRoot, 'src/styles.css'),
+                input: resolve(projectRoot, 'src/styles/theme.css'),
                 output: {
-                    assetFileNames: 'styles.css',
+                    assetFileNames: 'theme.css',
                 },
             },
         },
diff --git a/vite.config.ts b/vite.config.ts
index 72f3399e5..6b95b2afb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -16,6 +16,9 @@ const basePlugins = [
 
 function defaultConfig(): UserConfig {
     return {
+        resolve: {
+            tsconfigPaths: true,
+        },
         plugins: [
             ...basePlugins,
             babel(),
@@ -58,6 +61,7 @@ function defaultConfig(): UserConfig {
                 ],
                 external: (id) => {
                     return !id.startsWith('~icons/')
+                        && !id.startsWith('@/')
                         && !id.startsWith('.')
                         && !isAbsolute(id)
                 },
