diff --git a/.storybook/main.cjs b/.storybook/main.cjs
index 96427f2a1..9b2ec1176 100644
--- a/.storybook/main.cjs
+++ b/.storybook/main.cjs
@@ -73,7 +73,18 @@ const config = {
 
         config.module.rules.push({
             test: /\.scss$/,
-            use: ['style-loader', 'css-loader', 'sass-loader']
+            use: [
+                'style-loader',
+                'css-loader',
+                {
+                    loader: 'sass-loader',
+                    options: {
+                        sassOptions: {
+                            includePaths: [path.resolve(__dirname, '..')]
+                        }
+                    }
+                }
+            ]
         });
 
         config.resolve.alias = {
@@ -81,6 +92,10 @@ const config = {
             '~': path.resolve(__dirname, '../src'),
             '~/components': path.resolve(__dirname, '../src/components')
         };
+        config.resolve.modules = [
+            ...(config.resolve.modules ?? []),
+            path.resolve(__dirname, '..')
+        ];
         return config;
     },
     framework: {
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 9d4062871..664945025 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,6 @@
 import '../main.tailwind.css';
 import '../src/design-systems/clarity/default.scss';
+import '../src/design-systems/baremetal/default.scss';
 
 /** @type { import('@storybook/react-webpack5').Preview } */
 const preview = {
@@ -15,8 +16,13 @@ const preview = {
     },
 
     decorators: [
-    // Adds theme switching support.
-    // NOTE: requires setting "darkMode" to "class" in your tailwind config
+        (Story) => {
+            if (typeof document !== 'undefined') {
+                document.body.setAttribute('data-rad-ui-design-system', 'clarity');
+            }
+
+            return Story();
+        }
     ]
 };
 
diff --git a/agents/development/sync-storybook-releases.md b/agents/development/sync-storybook-releases.md
new file mode 100644
index 000000000..67baab582
--- /dev/null
+++ b/agents/development/sync-storybook-releases.md
@@ -0,0 +1,13 @@
+# Sync Storybook Component Release Status
+
+This document contains instuctions on how to sync the component release status on storybook.
+
+For more details on how Rad UI components and their lifecyles works check out [Rad UI Component Lifecycle](knowledge/releases/how-rad-ui-releases-are-made.md).
+
+## Syncing
+In Storybook, we care only about 2 categories to keep things simple
+
+1. WIP - All the components that arent released yet fall in this bucket
+2. Components - All the components that are released fall in this bucket
+
+Sync storybook by making sure that the components are placed in the correct category.
diff --git a/knowledge/releases/how-rad-ui-releases-are-made.md b/knowledge/releases/how-rad-ui-releases-are-made.md
new file mode 100644
index 000000000..f17634f60
--- /dev/null
+++ b/knowledge/releases/how-rad-ui-releases-are-made.md
@@ -0,0 +1,31 @@
+# Rad UI Release stages
+
+## Phase 1 - WIP
+These components are work in progress and are not ready for production use.
+
+## Phase 2 - Beta
+These components are packaged and are bundled in the production build, but are not publicly announced regarding its availability. It is available for use if the consumer knows about it but at their own risk. These are generally meant for the library authors to test them out in internal experiments and apps before making them public.
+
+## Phase 3 - Preview
+These are released to the public, ideally gearing up for production release, but use with caution as they are still subject to change.
+
+## Phase 4 - Stable
+These are released and officially documented on the docs website. These components are production ready and can be used in production applications.
+
+# Other release types
+
+## Deprecated
+These components will be removed in a future release. They are still available for use but are not recommended for use.
+
+## Removed
+These components have been removed from the library and are no longer available for use.
+
+
+
+# Workflow
+
+On Storybook, non stable components are put inside "WIP" category, until they are released they stay there. Once they are released they are placed inside "Components" category.
+
+What defines a released component?
+1. The component name is part of scripts/RELEASED_COMPONENTS.cjs
+2. The component is documented on the docs website
\ No newline at end of file
diff --git a/package.json b/package.json
index 1f686fde4..806d4885b 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
       "types": "./dist/index.d.ts"
     },
     "./themes/default.css": "./dist/themes/default.css",
+    "./themes/baremetal.css": "./dist/themes/baremetal.css",
     "./themes/tailwind-presets/default.js": "./dist/themes/tailwind-presets/default.js",
     "./Accordion": {
       "import": "./dist/components/Accordion.js",
@@ -451,4 +452,4 @@
       "eslint": "$eslint"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/rollup-css.config.js b/rollup-css.config.js
index b79339500..d764ce379 100644
--- a/rollup-css.config.js
+++ b/rollup-css.config.js
@@ -2,13 +2,12 @@ import postcss from 'rollup-plugin-postcss';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
-// Get the directory name of the current module
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-export default {
-    input: 'src/design-systems/clarity/default.scss',
+const createThemeConfig = (input, file) => ({
+    input,
     output: {
-        file: 'dist/themes/default.css'
+        file
     },
     onwarn(warning, warn) {
         // Suppress CSS file overwrite warnings
@@ -38,4 +37,9 @@ export default {
             }
         })
     ]
-};
+});
+
+export default [
+    createThemeConfig('src/design-systems/clarity/default.scss', 'dist/themes/default.css'),
+    createThemeConfig('src/design-systems/baremetal/default.scss', 'dist/themes/baremetal.css')
+];
diff --git a/scripts/generate-exports.cjs b/scripts/generate-exports.cjs
index 8b2cb1387..29b4e6747 100644
--- a/scripts/generate-exports.cjs
+++ b/scripts/generate-exports.cjs
@@ -63,6 +63,7 @@ exportsMap['.'] = {
 
 // Add theme exports
 exportsMap['./themes/default.css'] = './dist/themes/default.css';
+exportsMap['./themes/baremetal.css'] = './dist/themes/baremetal.css';
 exportsMap['./themes/tailwind-presets/default.js'] = './dist/themes/tailwind-presets/default.js';
 
 const notReleasedComponents = [];
diff --git a/src/components/tools/SandboxEditor/SandboxEditor.tsx b/src/components/tools/SandboxEditor/SandboxEditor.tsx
index 7864c26ac..b014d778d 100644
--- a/src/components/tools/SandboxEditor/SandboxEditor.tsx
+++ b/src/components/tools/SandboxEditor/SandboxEditor.tsx
@@ -43,10 +43,12 @@ const ColorSelect = ({ color, isDarkMode, isSelected }: ColorSelectProps) => {
 };
 
 type SandboxProps = { className?: string } & PropsWithChildren
+type DesignSystem = 'clarity' | 'baremetal'
 
 const SandboxEditor = ({ children, className }: SandboxProps) => {
     const [isDarkMode, setIsDarkMode] = useState(false);
     const [isCondensed, setIsCondensed] = useState(false);
+    const [designSystem, setDesignSystem] = useState<DesignSystem>('clarity');
 
     type AvailableColors = keyof typeof colors
 
@@ -54,7 +56,13 @@ const SandboxEditor = ({ children, className }: SandboxProps) => {
 
     useEffect(() => {
         const isDarkMode = localStorage.getItem('isDarkMode') === 'true';
+        const savedDesignSystem = localStorage.getItem('radUiDesignSystem');
+
         setIsDarkMode(isDarkMode);
+
+        if (savedDesignSystem === 'clarity' || savedDesignSystem === 'baremetal') {
+            setDesignSystem(savedDesignSystem);
+        }
     }, []);
 
     useEffect(() => {
@@ -73,85 +81,114 @@ const SandboxEditor = ({ children, className }: SandboxProps) => {
         setIsDarkMode(!isDarkMode);
     };
 
-    return <Theme
-        appearance={isDarkMode ? 'dark' : 'light'}
-        accentColor={colorName}>
-        <div className='min-h-screen border border-gray-300 bg-gray-50 p-3 shadow-sm text-gray-900 sm:p-4'>
-            <div
-                className={`sticky top-0 z-20 mb-2 ${isCondensed ? 'pb-2' : ''}`.trim()}
-            >
+    const updateDesignSystem = (value: string) => {
+        if (value !== 'clarity' && value !== 'baremetal') {
+            return;
+        }
+
+        localStorage.setItem('radUiDesignSystem', value);
+        setDesignSystem(value);
+    };
+
+    return <div data-rad-ui-design-system={designSystem}>
+        <Theme
+            appearance={isDarkMode ? 'dark' : 'light'}
+            accentColor={colorName}>
+            <div className='min-h-screen border border-gray-300 bg-gray-50 p-3 shadow-sm text-gray-900 sm:p-4'>
                 <div
-                    className={`rounded-xl border border-transparent bg-[color:color-mix(in_oklab,var(--rad-ui-surface-canvas)_82%,transparent)] backdrop-blur supports-[backdrop-filter]:bg-[color:color-mix(in_oklab,var(--rad-ui-surface-canvas)_72%,transparent)] ${isCondensed ? 'px-3 py-2 shadow-sm' : 'px-0 py-0 shadow-none'}`.trim()}
+                    className={`sticky top-0 z-20 mb-2 ${isCondensed ? 'pb-2' : ''}`.trim()}
                 >
-                    <div className='flex items-start justify-between gap-2'>
-                    <div className='flex min-w-0 items-center space-x-3'>
-                        <div className='text-gray-1000 shrink-0'>
-                            <RadUILogo/>
+                    <div
+                        className={`rounded-xl border border-transparent bg-[color:color-mix(in_oklab,var(--rad-ui-surface-canvas)_82%,transparent)] backdrop-blur supports-[backdrop-filter]:bg-[color:color-mix(in_oklab,var(--rad-ui-surface-canvas)_72%,transparent)] ${isCondensed ? 'px-3 py-2 shadow-sm' : 'px-0 py-0 shadow-none'}`.trim()}
+                    >
+                        <div className='flex items-start justify-between gap-2'>
+                            <div className='flex min-w-0 items-center space-x-3'>
+                                <div className='text-gray-1000 shrink-0'>
+                                    <RadUILogo/>
+                                </div>
+                                <Separator orientation='vertical' className={isCondensed ? 'opacity-60' : 'opacity-100'} />
+                                <div className='min-w-0'>
+                                    <Heading as='h1' className={`font-semibold leading-none tracking-tight text-gray-1000 ${isCondensed ? 'text-xl sm:text-2xl' : 'text-3xl sm:text-4xl'}`.trim()}>
+                                        Sandbox Editor
+                                    </Heading>
+                                    <Text className={`mt-0.5 font-normal leading-tight text-gray-950 ${isCondensed ? 'hidden' : 'text-sm'}`.trim()}>
+                                        Preview Rad UI components with theme and accent controls.
+                                    </Text>
+                                </div>
+                            </div>
+                            <Button
+                                variant="solid"
+                                aria-label={`Switch to ${isDarkMode ? 'light' : 'dark'} mode`}
+                                onClick={toggleDarkMode}
+                            >
+                                {isDarkMode ? <SunIcon/> : <MoonIcon/>}
+                            </Button>
                         </div>
-                        <Separator orientation='vertical' className={isCondensed ? 'opacity-60' : 'opacity-100'} />
-                        <div className='min-w-0'>
-                            <Heading as='h1' className={`font-semibold leading-none tracking-tight text-gray-1000 ${isCondensed ? 'text-xl sm:text-2xl' : 'text-3xl sm:text-4xl'}`.trim()}>
-                                Sandbox Editor
-                            </Heading>
-                            <Text className={`mt-0.5 font-normal leading-tight text-gray-950 ${isCondensed ? 'hidden' : 'text-sm'}`.trim()}>
-                                Preview Rad UI components with theme and accent controls.
-                            </Text>
+                        <Separator className={isCondensed ? 'opacity-70' : 'opacity-100'} />
+                        <div className={`grid gap-2 sm:grid-cols-2 sm:items-end ${isCondensed ? 'py-0.5' : 'py-1.5'}`.trim()}>
+                            <div className='grid gap-1'>
+                                <Text as='span' className='text-sm text-gray-950 leading-none'>
+                                    Design system
+                                </Text>
+                                <Select.Root value={designSystem} onValueChange={updateDesignSystem}>
+                                    <Select.Trigger aria-label='Design system'>
+                                        <span className='capitalize'>{designSystem}</span>
+                                    </Select.Trigger>
+                                    <Select.Portal>
+                                        <Select.Content>
+                                            <Select.Group>
+                                                <Select.Item value='clarity'>Clarity</Select.Item>
+                                                <Select.Item value='baremetal'>Baremetal</Select.Item>
+                                            </Select.Group>
+                                        </Select.Content>
+                                    </Select.Portal>
+                                </Select.Root>
+                            </div>
+                            <div className='grid gap-1'>
+                                <Text as='span' className='text-sm text-gray-950 leading-none'>
+                                    Accent: <span className='capitalize'>{colorName}</span>
+                                </Text>
+                                <Select.Root value={colorName} onValueChange={(value) => setColorName(value as AvailableColors)}>
+                                    <Select.Trigger aria-label='Accent color'>
+                                        <span className='flex items-center gap-2'>
+                                            <ColorSelect
+                                                color={colors[colorName]}
+                                                isDarkMode={isDarkMode}
+                                                isSelected={true}
+                                            />
+                                            <span className='capitalize'>{colorName}</span>
+                                        </span>
+                                    </Select.Trigger>
+                                    <Select.Portal>
+                                        <Select.Content>
+                                            <Select.Group>
+                                                {Object.entries(colors).map(([availableColorName, color]) => (
+                                                    <Select.Item key={availableColorName} value={availableColorName}>
+                                                        <span className='flex items-center gap-2'>
+                                                            <ColorSelect
+                                                                color={color}
+                                                                isDarkMode={isDarkMode}
+                                                                isSelected={availableColorName === colorName}
+                                                            />
+                                                            <span className='capitalize'>{availableColorName}</span>
+                                                        </span>
+                                                    </Select.Item>
+                                                ))}
+                                            </Select.Group>
+                                        </Select.Content>
+                                    </Select.Portal>
+                                </Select.Root>
+                            </div>
                         </div>
                     </div>
-                    <Button
-                        variant="solid"
-                        aria-label={`Switch to ${isDarkMode ? 'light' : 'dark'} mode`}
-                        onClick={toggleDarkMode}
-                    >
-                        {isDarkMode ? <SunIcon/> : <MoonIcon/>}
-                    </Button>
                 </div>
-                    <Separator className={isCondensed ? 'opacity-70' : 'opacity-100'} />
-                    <div className={`flex flex-col gap-1.5 sm:flex-row sm:items-center sm:justify-between ${isCondensed ? 'py-0.5' : 'py-1.5'}`.trim()}>
-                        <Text as='span' className='text-sm text-gray-950 leading-none'>
-                            Accent: <span className='capitalize'>{colorName}</span>
-                        </Text>
-                        <div className={`w-full sm:w-[220px] ${isCondensed ? 'sm:w-[200px]' : ''}`.trim()}>
-                            <Select.Root value={colorName} onValueChange={(value) => setColorName(value as AvailableColors)}>
-                                <Select.Trigger aria-label='Accent color'>
-                                    <span className='flex items-center gap-2'>
-                                        <ColorSelect
-                                            color={colors[colorName]}
-                                            isDarkMode={isDarkMode}
-                                            isSelected={true}
-                                        />
-                                        <span className='capitalize'>{colorName}</span>
-                                    </span>
-                                </Select.Trigger>
-                                <Select.Portal>
-                                    <Select.Content>
-                                        <Select.Group>
-                                            {Object.entries(colors).map(([availableColorName, color]) => (
-                                                <Select.Item key={availableColorName} value={availableColorName}>
-                                                    <span className='flex items-center gap-2'>
-                                                        <ColorSelect
-                                                            color={color}
-                                                            isDarkMode={isDarkMode}
-                                                            isSelected={availableColorName === colorName}
-                                                        />
-                                                        <span className='capitalize'>{availableColorName}</span>
-                                                    </span>
-                                                </Select.Item>
-                                            ))}
-                                        </Select.Group>
-                                    </Select.Content>
-                                </Select.Portal>
-                            </Select.Root>
-                        </div>
-                    </div>
+                <Separator/>
+                <div className={`pt-2.5 ${className ?? ''}`.trim()} >
+                    {children}
                 </div>
             </div>
-            <Separator/>
-            <div className={`pt-2.5 ${className ?? ''}`.trim()} >
-                {children}
-            </div>
-        </div>
-    </Theme>;
+        </Theme>
+    </div>;
 };
 
 export default SandboxEditor;
diff --git a/src/components/ui/Accordion/accordion.baremetal.scss b/src/components/ui/Accordion/accordion.baremetal.scss
new file mode 100644
index 000000000..4ded367fa
--- /dev/null
+++ b/src/components/ui/Accordion/accordion.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-accordion-root) { @include baremetal.surface; }
+#{baremetal.$theme-root} :where(.rad-ui-accordion-trigger) { @include baremetal.option-item; }
diff --git a/src/components/ui/AlertDialog/alert-dialog.baremetal.scss b/src/components/ui/AlertDialog/alert-dialog.baremetal.scss
new file mode 100644
index 000000000..d4919c47b
--- /dev/null
+++ b/src/components/ui/AlertDialog/alert-dialog.baremetal.scss
@@ -0,0 +1,9 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-alert-dialog-trigger, .rad-ui-alert-dialog-action, .rad-ui-alert-dialog-cancel) { @include baremetal.button-like; }
+#{baremetal.$theme-root} :where(.rad-ui-alert-dialog-content) { @include baremetal.surface; padding: 1.5rem; }
+#{baremetal.$theme-root} :where(.rad-ui-alert-dialog-title) { @include baremetal.title-text; }
+#{baremetal.$theme-root} :where(.rad-ui-alert-dialog-description) { @include baremetal.body-text; }
+#{baremetal.$theme-root} :where(.rad-ui-alert-dialog-footer) { border-color: var(--rad-ui-baremetal-black) !important; background: var(--rad-ui-baremetal-white) !important; }
+#{baremetal.$theme-root} :where(.rad-ui-alert-dialog-overlay) { background: rgb(255, 255, 255, 0.72); backdrop-filter: none; }
diff --git a/src/components/ui/Avatar/avatar.baremetal.scss b/src/components/ui/Avatar/avatar.baremetal.scss
new file mode 100644
index 000000000..a5565145c
--- /dev/null
+++ b/src/components/ui/Avatar/avatar.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-avatar, .rad-ui-avatar-fallback) { @include baremetal.chip-like; }
diff --git a/src/components/ui/AvatarGroup/avatar-group.baremetal.scss b/src/components/ui/AvatarGroup/avatar-group.baremetal.scss
new file mode 100644
index 000000000..c8956be50
--- /dev/null
+++ b/src/components/ui/AvatarGroup/avatar-group.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-avatar-group-fallback) { @include baremetal.chip-like; }
diff --git a/src/components/ui/Badge/badge.baremetal.scss b/src/components/ui/Badge/badge.baremetal.scss
new file mode 100644
index 000000000..6a7079a79
--- /dev/null
+++ b/src/components/ui/Badge/badge.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-badge) { @include baremetal.chip-like; }
diff --git a/src/components/ui/BlockQuote/blockquote.baremetal.scss b/src/components/ui/BlockQuote/blockquote.baremetal.scss
new file mode 100644
index 000000000..05578a0d9
--- /dev/null
+++ b/src/components/ui/BlockQuote/blockquote.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-block-quote) { border-color: var(--rad-ui-baremetal-black) !important; color: var(--rad-ui-baremetal-black) !important; }
diff --git a/src/components/ui/Button/button.baremetal.scss b/src/components/ui/Button/button.baremetal.scss
new file mode 100644
index 000000000..e585021b5
--- /dev/null
+++ b/src/components/ui/Button/button.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-button) { @include baremetal.button-like; }
diff --git a/src/components/ui/Callout/callout.baremetal.scss b/src/components/ui/Callout/callout.baremetal.scss
new file mode 100644
index 000000000..8c06a46a8
--- /dev/null
+++ b/src/components/ui/Callout/callout.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-callout) { @include baremetal.surface; }
+#{baremetal.$theme-root} :where(.rad-ui-callout-text) { @include baremetal.title-text; }
diff --git a/src/components/ui/Card/card.baremetal.scss b/src/components/ui/Card/card.baremetal.scss
new file mode 100644
index 000000000..8df07833e
--- /dev/null
+++ b/src/components/ui/Card/card.baremetal.scss
@@ -0,0 +1,7 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-card) { @include baremetal.surface; }
+#{baremetal.$theme-root} :where(.rad-ui-card-title) { @include baremetal.title-text; }
+#{baremetal.$theme-root} :where(.rad-ui-card-description) { @include baremetal.body-text; }
+#{baremetal.$theme-root} :where(.rad-ui-card-header, .rad-ui-card-footer) { border-color: var(--rad-ui-baremetal-black) !important; background: var(--rad-ui-baremetal-white) !important; }
diff --git a/src/components/ui/Checkbox/checkbox.baremetal.scss b/src/components/ui/Checkbox/checkbox.baremetal.scss
new file mode 100644
index 000000000..45fe70119
--- /dev/null
+++ b/src/components/ui/Checkbox/checkbox.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-checkbox) { @include baremetal.square-control; }
diff --git a/src/components/ui/CheckboxCards/checkbox-cards.baremetal.scss b/src/components/ui/CheckboxCards/checkbox-cards.baremetal.scss
new file mode 100644
index 000000000..8e3b06cd9
--- /dev/null
+++ b/src/components/ui/CheckboxCards/checkbox-cards.baremetal.scss
@@ -0,0 +1,6 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-checkbox-cards-root) { @include baremetal.surface(false); gap: 0; padding: 0; }
+#{baremetal.$theme-root} :where(.rad-ui-checkbox-cards-item) { @include baremetal.option-item; }
+#{baremetal.$theme-root} :where(.rad-ui-checkbox-cards-item[data-state="checked"]) { @include baremetal.checked-item; }
diff --git a/src/components/ui/CheckboxCards/stories/CheckboxCards.stories.tsx b/src/components/ui/CheckboxCards/stories/CheckboxCards.stories.tsx
index 115728e62..6a40cae91 100644
--- a/src/components/ui/CheckboxCards/stories/CheckboxCards.stories.tsx
+++ b/src/components/ui/CheckboxCards/stories/CheckboxCards.stories.tsx
@@ -56,7 +56,7 @@ const CheckboxCardsExample = (args:any) => {
 };
 
 export default {
-    title: 'WIP/CheckboxCards',
+    title: 'Components/CheckboxCards',
     component: CheckboxCards,
     render: (args:any) => <CheckboxCardsExample {...args} />
 };
diff --git a/src/components/ui/CheckboxGroup/checkbox-group.baremetal.scss b/src/components/ui/CheckboxGroup/checkbox-group.baremetal.scss
new file mode 100644
index 000000000..f318fd399
--- /dev/null
+++ b/src/components/ui/CheckboxGroup/checkbox-group.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-checkbox-group-trigger) { @include baremetal.square-control; }
diff --git a/src/components/ui/CheckboxGroup/stories/CheckboxGroup.stories.tsx b/src/components/ui/CheckboxGroup/stories/CheckboxGroup.stories.tsx
index f9ceceefc..f7360d372 100644
--- a/src/components/ui/CheckboxGroup/stories/CheckboxGroup.stories.tsx
+++ b/src/components/ui/CheckboxGroup/stories/CheckboxGroup.stories.tsx
@@ -40,7 +40,7 @@ const CheckboxGroupExample = (args:any) => {
 };
 
 export default {
-    title: 'WIP/CheckboxGroup',
+    title: 'Components/CheckboxGroup',
     component: CheckboxGroup,
     render: (args:any) => <CheckboxGroupExample {...args} />
 };
diff --git a/src/components/ui/Code/code.baremetal.scss b/src/components/ui/Code/code.baremetal.scss
new file mode 100644
index 000000000..18c34d5a4
--- /dev/null
+++ b/src/components/ui/Code/code.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-code) { @include baremetal.chip-like; }
diff --git a/src/components/ui/Collapsible/collapsible.baremetal.scss b/src/components/ui/Collapsible/collapsible.baremetal.scss
new file mode 100644
index 000000000..df5d07571
--- /dev/null
+++ b/src/components/ui/Collapsible/collapsible.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-collapsible-panel) { @include baremetal.surface; }
+#{baremetal.$theme-root} :where(.rad-ui-collapsible-trigger) { @include baremetal.option-item; }
diff --git a/src/components/ui/Collapsible/stories/Collapsible.stories.tsx b/src/components/ui/Collapsible/stories/Collapsible.stories.tsx
index 94f81620d..2012608e1 100644
--- a/src/components/ui/Collapsible/stories/Collapsible.stories.tsx
+++ b/src/components/ui/Collapsible/stories/Collapsible.stories.tsx
@@ -19,7 +19,7 @@ const Items = [
 
 const meta: Meta<typeof Collapsible> = {
     component: Collapsible,
-    title: 'WIP/Collapsible'
+    title: 'Components/Collapsible'
 };
 
 export default meta;
diff --git a/src/components/ui/Combobox/combobox.baremetal.scss b/src/components/ui/Combobox/combobox.baremetal.scss
new file mode 100644
index 000000000..8bca40d5b
--- /dev/null
+++ b/src/components/ui/Combobox/combobox.baremetal.scss
@@ -0,0 +1,8 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-combobox-trigger) { @include baremetal.button-like; }
+#{baremetal.$theme-root} :where(.rad-ui-combobox-content) { @include baremetal.surface; padding: 1.5rem; }
+#{baremetal.$theme-root} :where(.rad-ui-combobox-item) { @include baremetal.option-item; }
+#{baremetal.$theme-root} :where(.rad-ui-combobox-search) { @include baremetal.input-like; }
+#{baremetal.$theme-root} :where(.rad-ui-combobox-label) { border-color: var(--rad-ui-baremetal-black) !important; background: var(--rad-ui-baremetal-white) !important; }
diff --git a/src/components/ui/Combobox/stories/Combobox.stories.tsx b/src/components/ui/Combobox/stories/Combobox.stories.tsx
index 3aa88f2b5..757da0a4d 100644
--- a/src/components/ui/Combobox/stories/Combobox.stories.tsx
+++ b/src/components/ui/Combobox/stories/Combobox.stories.tsx
@@ -4,7 +4,7 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-    title: 'WIP/Combobox',
+    title: 'Components/Combobox',
     component: Combobox
 } as any;
 
diff --git a/src/components/ui/ContextMenu/context-menu.baremetal.scss b/src/components/ui/ContextMenu/context-menu.baremetal.scss
new file mode 100644
index 000000000..122e723b0
--- /dev/null
+++ b/src/components/ui/ContextMenu/context-menu.baremetal.scss
@@ -0,0 +1,8 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-context-menu-trigger) { @include baremetal.button-like; }
+#{baremetal.$theme-root} :where(.rad-ui-context-menu-content) { @include baremetal.surface; padding: 1.5rem; }
+#{baremetal.$theme-root} :where(.rad-ui-context-menu-item, .rad-ui-context-menu-sub-trigger) { @include baremetal.option-item; }
+#{baremetal.$theme-root} :where(.rad-ui-context-menu-separator) { @include baremetal.divider; }
+#{baremetal.$theme-root} :where(.rad-ui-context-menu-label) { border-color: var(--rad-ui-baremetal-black) !important; background: var(--rad-ui-baremetal-white) !important; }
diff --git a/src/components/ui/ContextMenu/stories/ContextMenu.stories.tsx b/src/components/ui/ContextMenu/stories/ContextMenu.stories.tsx
index 2b7d73977..3527ef780 100644
--- a/src/components/ui/ContextMenu/stories/ContextMenu.stories.tsx
+++ b/src/components/ui/ContextMenu/stories/ContextMenu.stories.tsx
@@ -6,7 +6,7 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 type Story = StoryObj<typeof ContextMenu>;
 
 export default {
-    title: 'WIP/ContextMenu',
+    title: 'Components/ContextMenu',
     component: ContextMenu
 } as Meta<typeof ContextMenu>;
 
diff --git a/src/components/ui/DataList/data-list.baremetal.scss b/src/components/ui/DataList/data-list.baremetal.scss
new file mode 100644
index 000000000..0bf60a677
--- /dev/null
+++ b/src/components/ui/DataList/data-list.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-data-list) { @include baremetal.surface; }
+#{baremetal.$theme-root} :where(.rad-ui-data-list-label) { @include baremetal.body-text; }
diff --git a/src/components/ui/DataList/stories/DataList.stories.tsx b/src/components/ui/DataList/stories/DataList.stories.tsx
index f67f721ce..1a0d35b8e 100644
--- a/src/components/ui/DataList/stories/DataList.stories.tsx
+++ b/src/components/ui/DataList/stories/DataList.stories.tsx
@@ -6,7 +6,7 @@ import Badge from '~/components/ui/Badge/Badge';
 
 const meta: Meta<typeof DataList> = {
     component: DataList,
-    title: 'WIP/DataList'
+    title: 'Components/DataList'
 };
 
 export default meta;
diff --git a/src/components/ui/Dialog/dialog.baremetal.scss b/src/components/ui/Dialog/dialog.baremetal.scss
new file mode 100644
index 000000000..0b076127a
--- /dev/null
+++ b/src/components/ui/Dialog/dialog.baremetal.scss
@@ -0,0 +1,9 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-dialog-trigger) { @include baremetal.button-like; }
+#{baremetal.$theme-root} :where(.rad-ui-dialog-content) { @include baremetal.surface; padding: 1.5rem; }
+#{baremetal.$theme-root} :where(.rad-ui-dialog-title) { @include baremetal.title-text; }
+#{baremetal.$theme-root} :where(.rad-ui-dialog-description) { @include baremetal.body-text; }
+#{baremetal.$theme-root} :where(.rad-ui-dialog-footer) { border-color: var(--rad-ui-baremetal-black) !important; background: var(--rad-ui-baremetal-white) !important; }
+#{baremetal.$theme-root} :where(.rad-ui-dialog-overlay) { background: rgb(255, 255, 255, 0.72); backdrop-filter: none; }
diff --git a/src/components/ui/Dialog/stories/Dialog.stories.tsx b/src/components/ui/Dialog/stories/Dialog.stories.tsx
index 849066ce2..897d3e8b0 100644
--- a/src/components/ui/Dialog/stories/Dialog.stories.tsx
+++ b/src/components/ui/Dialog/stories/Dialog.stories.tsx
@@ -8,7 +8,7 @@ import { X } from 'lucide-react';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-    title: 'WIP/Dialog',
+    title: 'Components/Dialog',
     component: Dialog,
     render: (args: any) => {
         return (
diff --git a/src/components/ui/Disclosure/disclosure.baremetal.scss b/src/components/ui/Disclosure/disclosure.baremetal.scss
new file mode 100644
index 000000000..b18b6acec
--- /dev/null
+++ b/src/components/ui/Disclosure/disclosure.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-disclosure-trigger) { @include baremetal.option-item; }
diff --git a/src/components/ui/Disclosure/stories/Disclosure.stories.tsx b/src/components/ui/Disclosure/stories/Disclosure.stories.tsx
index 3d91d46e8..3362bd052 100644
--- a/src/components/ui/Disclosure/stories/Disclosure.stories.tsx
+++ b/src/components/ui/Disclosure/stories/Disclosure.stories.tsx
@@ -3,7 +3,7 @@ import Disclosure, { DisclosureProps } from '../Disclosure';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 export default {
-    title: 'WIP/Disclosure',
+    title: 'Components/Disclosure',
     component: Disclosure,
     render: (args: JSX.IntrinsicAttributes & DisclosureProps) => <SandboxEditor>
 
diff --git a/src/components/ui/DropdownMenu/dropdown-menu.baremetal.scss b/src/components/ui/DropdownMenu/dropdown-menu.baremetal.scss
new file mode 100644
index 000000000..2361e8409
--- /dev/null
+++ b/src/components/ui/DropdownMenu/dropdown-menu.baremetal.scss
@@ -0,0 +1,8 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-dropdown-menu-trigger) { @include baremetal.button-like; }
+#{baremetal.$theme-root} :where(.rad-ui-dropdown-menu-content) { @include baremetal.surface; padding: 1.5rem; }
+#{baremetal.$theme-root} :where(.rad-ui-dropdown-menu-item) { @include baremetal.option-item; }
+#{baremetal.$theme-root} :where(.rad-ui-dropdown-menu-separator) { @include baremetal.divider; }
+#{baremetal.$theme-root} :where(.rad-ui-dropdown-menu-label) { border-color: var(--rad-ui-baremetal-black) !important; background: var(--rad-ui-baremetal-white) !important; }
diff --git a/src/components/ui/DropdownMenu/stories/DropdownMenu.stories.tsx b/src/components/ui/DropdownMenu/stories/DropdownMenu.stories.tsx
index 67a632283..980cd3f58 100644
--- a/src/components/ui/DropdownMenu/stories/DropdownMenu.stories.tsx
+++ b/src/components/ui/DropdownMenu/stories/DropdownMenu.stories.tsx
@@ -6,7 +6,7 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 type Story = StoryObj<typeof DropdownMenu>;
 
 export default {
-    title: 'WIP/DropdownMenu',
+    title: 'Components/DropdownMenu',
     component: DropdownMenu
 };
 
diff --git a/src/components/ui/Heading/heading.baremetal.scss b/src/components/ui/Heading/heading.baremetal.scss
new file mode 100644
index 000000000..d6c77b404
--- /dev/null
+++ b/src/components/ui/Heading/heading.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-h1, .rad-ui-h2, .rad-ui-h3, .rad-ui-h4, .rad-ui-h5, .rad-ui-h6) { @include baremetal.title-text; }
diff --git a/src/components/ui/HoverCard/hover-card.baremetal.scss b/src/components/ui/HoverCard/hover-card.baremetal.scss
new file mode 100644
index 000000000..0bacfc386
--- /dev/null
+++ b/src/components/ui/HoverCard/hover-card.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-hover-card) { @include baremetal.surface; padding: 1.5rem; }
diff --git a/src/components/ui/HoverCard/stories/HoverCard.stories.tsx b/src/components/ui/HoverCard/stories/HoverCard.stories.tsx
index 3a6c5540a..5163ef9bf 100644
--- a/src/components/ui/HoverCard/stories/HoverCard.stories.tsx
+++ b/src/components/ui/HoverCard/stories/HoverCard.stories.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<typeof HoverCard> = {
-    title: 'WIP/HoverCard',
+    title: 'Components/HoverCard',
     component: HoverCard,
     decorators: [(Story) => (
         <SandboxEditor>
diff --git a/src/components/ui/Kbd/kbd.baremetal.scss b/src/components/ui/Kbd/kbd.baremetal.scss
new file mode 100644
index 000000000..28cf76cf7
--- /dev/null
+++ b/src/components/ui/Kbd/kbd.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-kbd) { @include baremetal.chip-like; }
diff --git a/src/components/ui/Link/link.baremetal.scss b/src/components/ui/Link/link.baremetal.scss
new file mode 100644
index 000000000..012635baa
--- /dev/null
+++ b/src/components/ui/Link/link.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-link) { color: var(--rad-ui-baremetal-black); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
diff --git a/src/components/ui/Menubar/menubar.baremetal.scss b/src/components/ui/Menubar/menubar.baremetal.scss
new file mode 100644
index 000000000..dcb390bca
--- /dev/null
+++ b/src/components/ui/Menubar/menubar.baremetal.scss
@@ -0,0 +1,8 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-menubar-trigger) { @include baremetal.button-like; }
+#{baremetal.$theme-root} :where(.rad-ui-menubar-content) { @include baremetal.surface; padding: 1.5rem; }
+#{baremetal.$theme-root} :where(.rad-ui-menubar-item, .rad-ui-menubar-sub-trigger) { @include baremetal.option-item; }
+#{baremetal.$theme-root} :where(.rad-ui-menubar-separator) { @include baremetal.divider; }
+#{baremetal.$theme-root} :where(.rad-ui-menubar-label) { border-color: var(--rad-ui-baremetal-black) !important; background: var(--rad-ui-baremetal-white) !important; }
diff --git a/src/components/ui/Menubar/stories/Menubar.stories.tsx b/src/components/ui/Menubar/stories/Menubar.stories.tsx
index f251168ec..5175be902 100644
--- a/src/components/ui/Menubar/stories/Menubar.stories.tsx
+++ b/src/components/ui/Menubar/stories/Menubar.stories.tsx
@@ -6,7 +6,7 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 type Story = StoryObj<typeof Menubar>;
 
 export default {
-    title: 'WIP/Menubar',
+    title: 'Components/Menubar',
     component: Menubar
 };
 
diff --git a/src/components/ui/Minimap/minimap.baremetal.scss b/src/components/ui/Minimap/minimap.baremetal.scss
new file mode 100644
index 000000000..b457276b9
--- /dev/null
+++ b/src/components/ui/Minimap/minimap.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-minimap-track) { @include baremetal.track; }
+#{baremetal.$theme-root} :where(.rad-ui-minimap-bubble) { @include baremetal.fill; }
diff --git a/src/components/ui/Minimap/stories/Minimap.stories.tsx b/src/components/ui/Minimap/stories/Minimap.stories.tsx
index 5418db4fa..12c88c0b6 100644
--- a/src/components/ui/Minimap/stories/Minimap.stories.tsx
+++ b/src/components/ui/Minimap/stories/Minimap.stories.tsx
@@ -25,7 +25,7 @@ const steps = [
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-    title: 'WIP/Minimap',
+    title: 'Components/Minimap',
     component: Minimap,
     render: () => <SandboxEditor>
         <div className='mt-5'>
diff --git a/src/components/ui/NavigationMenu/navigation-menu.baremetal.scss b/src/components/ui/NavigationMenu/navigation-menu.baremetal.scss
new file mode 100644
index 000000000..aab706b81
--- /dev/null
+++ b/src/components/ui/NavigationMenu/navigation-menu.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-navigation-menu-content) { @include baremetal.surface; }
+#{baremetal.$theme-root} :where(.rad-ui-navigation-menu-link, .rad-ui-navigation-menu-trigger) { @include baremetal.option-item; }
diff --git a/src/components/ui/NavigationMenu/stories/NavigationMenu.stories.tsx b/src/components/ui/NavigationMenu/stories/NavigationMenu.stories.tsx
index 2960365a7..b901fe184 100644
--- a/src/components/ui/NavigationMenu/stories/NavigationMenu.stories.tsx
+++ b/src/components/ui/NavigationMenu/stories/NavigationMenu.stories.tsx
@@ -3,7 +3,7 @@ import NavigationMenu from '../NavigationMenu';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 export default {
-    title: 'WIP/NavigationMenu',
+    title: 'Components/NavigationMenu',
     component: NavigationMenu.Root
 };
 
diff --git a/src/components/ui/NumberField/number-field.baremetal.scss b/src/components/ui/NumberField/number-field.baremetal.scss
new file mode 100644
index 000000000..7e7ac01ff
--- /dev/null
+++ b/src/components/ui/NumberField/number-field.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-number-field-increment, .rad-ui-number-field-decrement) { @include baremetal.button-like; }
+#{baremetal.$theme-root} :where(.rad-ui-number-field-input) { @include baremetal.input-like; }
diff --git a/src/components/ui/NumberField/stories/NumberField.stories.tsx b/src/components/ui/NumberField/stories/NumberField.stories.tsx
index 69ecd8feb..ff68bfa05 100644
--- a/src/components/ui/NumberField/stories/NumberField.stories.tsx
+++ b/src/components/ui/NumberField/stories/NumberField.stories.tsx
@@ -3,7 +3,7 @@ import NumberField from '../NumberField';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 export default {
-    title: 'WIP/NumberField',
+    title: 'Components/NumberField',
     component: NumberField
 };
 
diff --git a/src/components/ui/Progress/progress.baremetal.scss b/src/components/ui/Progress/progress.baremetal.scss
new file mode 100644
index 000000000..9bab8ba2d
--- /dev/null
+++ b/src/components/ui/Progress/progress.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-progress) { @include baremetal.track; }
+#{baremetal.$theme-root} :where(.rad-ui-progress-indicator) { @include baremetal.fill; }
diff --git a/src/components/ui/Quote/quote.baremetal.scss b/src/components/ui/Quote/quote.baremetal.scss
new file mode 100644
index 000000000..24041b18d
--- /dev/null
+++ b/src/components/ui/Quote/quote.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-quote) { color: var(--rad-ui-baremetal-black) !important; }
diff --git a/src/components/ui/Radio/radio.baremetal.scss b/src/components/ui/Radio/radio.baremetal.scss
new file mode 100644
index 000000000..9f92953ca
--- /dev/null
+++ b/src/components/ui/Radio/radio.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-radio) { @include baremetal.square-control; border-radius: 50% !important; }
diff --git a/src/components/ui/Radio/stories/Radio.stories.tsx b/src/components/ui/Radio/stories/Radio.stories.tsx
index 49e86309b..b98d73864 100644
--- a/src/components/ui/Radio/stories/Radio.stories.tsx
+++ b/src/components/ui/Radio/stories/Radio.stories.tsx
@@ -3,7 +3,7 @@ import Radio from '../Radio';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 export default {
-    title: 'WIP/Radio',
+    title: 'Components/Radio',
     component: Radio,
     render: (args: React.ComponentProps<typeof Radio>) => (
         <SandboxEditor>
diff --git a/src/components/ui/RadioCards/RadioCards.stories.tsx b/src/components/ui/RadioCards/RadioCards.stories.tsx
index a61081f9c..67859fbf8 100644
--- a/src/components/ui/RadioCards/RadioCards.stories.tsx
+++ b/src/components/ui/RadioCards/RadioCards.stories.tsx
@@ -43,7 +43,7 @@ const RadioCardsTemplate = () => {
 };
 
 export default {
-    title: 'WIP/RadioCards',
+    title: 'Components/RadioCards',
     component: RadioCards,
     render: () => <RadioCardsTemplate />
 } as any;
diff --git a/src/components/ui/RadioCards/radiocards.baremetal.scss b/src/components/ui/RadioCards/radiocards.baremetal.scss
new file mode 100644
index 000000000..4632e3978
--- /dev/null
+++ b/src/components/ui/RadioCards/radiocards.baremetal.scss
@@ -0,0 +1,6 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-radio-cards) { @include baremetal.surface(false); gap: 0; padding: 0; }
+#{baremetal.$theme-root} :where(.rad-ui-radio-cards-item) { @include baremetal.option-item; }
+#{baremetal.$theme-root} :where(.rad-ui-radio-cards-item[data-state="checked"]) { @include baremetal.checked-item; }
diff --git a/src/components/ui/RadioGroup/radio-group.baremetal.scss b/src/components/ui/RadioGroup/radio-group.baremetal.scss
new file mode 100644
index 000000000..1d76b9b1a
--- /dev/null
+++ b/src/components/ui/RadioGroup/radio-group.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-radio-group-item) { @include baremetal.square-control; border-radius: 50% !important; }
diff --git a/src/components/ui/RadioGroup/stories/RadioGroup.stories.tsx b/src/components/ui/RadioGroup/stories/RadioGroup.stories.tsx
index 7f1e06d86..4af1fcead 100644
--- a/src/components/ui/RadioGroup/stories/RadioGroup.stories.tsx
+++ b/src/components/ui/RadioGroup/stories/RadioGroup.stories.tsx
@@ -26,7 +26,7 @@ const RadioButton = () => {
 };
 
 export default {
-    title: 'WIP/RadioGroup',
+    title: 'Components/RadioGroup',
     component: RadioGroup,
     render: () => <RadioButton />
 };
diff --git a/src/components/ui/ScrollArea/scroll-area.baremetal.scss b/src/components/ui/ScrollArea/scroll-area.baremetal.scss
new file mode 100644
index 000000000..e76891294
--- /dev/null
+++ b/src/components/ui/ScrollArea/scroll-area.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-scroll-area-scrollbar, .rad-ui-scroll-area-thumb) { border-radius: 0 !important; background: var(--rad-ui-baremetal-subtle) !important; }
+#{baremetal.$theme-root} :where(.rad-ui-scroll-area-thumb) { background: var(--rad-ui-baremetal-black) !important; }
diff --git a/src/components/ui/ScrollArea/stories/ScrollArea.stories.tsx b/src/components/ui/ScrollArea/stories/ScrollArea.stories.tsx
index 50a220884..21fbfc119 100644
--- a/src/components/ui/ScrollArea/stories/ScrollArea.stories.tsx
+++ b/src/components/ui/ScrollArea/stories/ScrollArea.stories.tsx
@@ -38,7 +38,7 @@ const ScrollAreaTemplate = (args: any) => {
 };
 
 export default {
-    title: 'WIP/ScrollArea',
+    title: 'Components/ScrollArea',
     component: ScrollArea,
     render: (args: any) => <ScrollAreaTemplate {...args}/>
 };
diff --git a/src/components/ui/Select/select.baremetal.scss b/src/components/ui/Select/select.baremetal.scss
new file mode 100644
index 000000000..09b3ecdf8
--- /dev/null
+++ b/src/components/ui/Select/select.baremetal.scss
@@ -0,0 +1,7 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-select-trigger) { @include baremetal.button-like; }
+#{baremetal.$theme-root} :where(.rad-ui-select-content) { @include baremetal.surface; padding: 1.5rem; }
+#{baremetal.$theme-root} :where(.rad-ui-select-item) { @include baremetal.option-item; }
+#{baremetal.$theme-root} :where(.rad-ui-select-label) { border-color: var(--rad-ui-baremetal-black) !important; background: var(--rad-ui-baremetal-white) !important; }
diff --git a/src/components/ui/Select/stories/Select.stories.tsx b/src/components/ui/Select/stories/Select.stories.tsx
index ec948c8b3..a46b0e615 100644
--- a/src/components/ui/Select/stories/Select.stories.tsx
+++ b/src/components/ui/Select/stories/Select.stories.tsx
@@ -4,7 +4,7 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-    title: 'WIP/Select',
+    title: 'Components/Select',
     component: Select
 } as any;
 
diff --git a/src/components/ui/Separator/separator.baremetal.scss b/src/components/ui/Separator/separator.baremetal.scss
new file mode 100644
index 000000000..c8a34d6f8
--- /dev/null
+++ b/src/components/ui/Separator/separator.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-separator) { @include baremetal.divider; }
diff --git a/src/components/ui/Skeleton/skeleton.baremetal.scss b/src/components/ui/Skeleton/skeleton.baremetal.scss
new file mode 100644
index 000000000..f0e9953cb
--- /dev/null
+++ b/src/components/ui/Skeleton/skeleton.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-skeleton) { @include baremetal.chip-like; }
diff --git a/src/components/ui/Slider/slider.baremetal.scss b/src/components/ui/Slider/slider.baremetal.scss
new file mode 100644
index 000000000..b5fde4a0e
--- /dev/null
+++ b/src/components/ui/Slider/slider.baremetal.scss
@@ -0,0 +1,8 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-slider-track) { @include baremetal.track; }
+#{baremetal.$theme-root} :where(.rad-ui-slider-range) { @include baremetal.fill; }
+#{baremetal.$theme-root} :where(.rad-ui-slider-mark-label) { @include baremetal.body-text; }
+#{baremetal.$theme-root} :where(.rad-ui-slider-thumb, .rad-ui-slider-thumb-lower, .rad-ui-slider-thumb-upper) { width: 1.75rem; height: 1.75rem; border: 1px solid var(--rad-ui-baremetal-black) !important; border-radius: 0 !important; background: var(--rad-ui-baremetal-black) !important; box-shadow: none !important; transition: none !important; }
+#{baremetal.$theme-root} :where(.rad-ui-slider-thumb, .rad-ui-slider-thumb-lower, .rad-ui-slider-thumb-upper):where(:hover, [data-state="active"], [data-state="dragging"]) { border-color: var(--rad-ui-baremetal-black) !important; box-shadow: none !important; }
diff --git a/src/components/ui/Slider/stories/Slider.stories.tsx b/src/components/ui/Slider/stories/Slider.stories.tsx
index b873d8cc8..e0a076127 100644
--- a/src/components/ui/Slider/stories/Slider.stories.tsx
+++ b/src/components/ui/Slider/stories/Slider.stories.tsx
@@ -3,7 +3,7 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 import Slider from '../Slider';
 
 export default {
-    title: 'WIP/Slider',
+    title: 'Components/Slider',
     component: Slider
 } as any;
 
diff --git a/src/components/ui/Spinner/spinner.baremetal.scss b/src/components/ui/Spinner/spinner.baremetal.scss
new file mode 100644
index 000000000..416d687de
--- /dev/null
+++ b/src/components/ui/Spinner/spinner.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-spinner) { color: var(--rad-ui-baremetal-black) !important; }
diff --git a/src/components/ui/Splitter/splitter.baremetal.scss b/src/components/ui/Splitter/splitter.baremetal.scss
new file mode 100644
index 000000000..eaed57b57
--- /dev/null
+++ b/src/components/ui/Splitter/splitter.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-splitter, .rad-ui-splitter-handle) { border-color: var(--rad-ui-baremetal-black) !important; }
diff --git a/src/components/ui/Steps/steps.baremetal.scss b/src/components/ui/Steps/steps.baremetal.scss
new file mode 100644
index 000000000..0fa098296
--- /dev/null
+++ b/src/components/ui/Steps/steps.baremetal.scss
@@ -0,0 +1,7 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-steps-track) { @include baremetal.track; }
+#{baremetal.$theme-root} :where(.rad-ui-steps-line) { @include baremetal.fill; }
+#{baremetal.$theme-root} :where(.rad-ui-steps-bubble) { @include baremetal.chip-like; }
+#{baremetal.$theme-root} :where(.rad-ui-steps-description) { @include baremetal.body-text; }
diff --git a/src/components/ui/Steps/stories/Steps.stories.tsx b/src/components/ui/Steps/stories/Steps.stories.tsx
index dc6a45135..f5d5fb5b5 100644
--- a/src/components/ui/Steps/stories/Steps.stories.tsx
+++ b/src/components/ui/Steps/stories/Steps.stories.tsx
@@ -58,7 +58,7 @@ const checkoutSteps = [
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-    title: 'WIP/Steps',
+    title: 'Components/Steps',
     component: Steps,
     render: () => <SandboxEditor>
         <div className='mt-5'>
diff --git a/src/components/ui/Strong/strong.baremetal.scss b/src/components/ui/Strong/strong.baremetal.scss
new file mode 100644
index 000000000..7e46b1e83
--- /dev/null
+++ b/src/components/ui/Strong/strong.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-strong) { @include baremetal.title-text; }
diff --git a/src/components/ui/Switch/stories/Switch.stories.tsx b/src/components/ui/Switch/stories/Switch.stories.tsx
index f8bf1321b..d70486894 100644
--- a/src/components/ui/Switch/stories/Switch.stories.tsx
+++ b/src/components/ui/Switch/stories/Switch.stories.tsx
@@ -3,7 +3,7 @@ import Switch from '../Switch';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 export default {
-    title: 'WIP/Switch',
+    title: 'Components/Switch',
     component: Switch
 } as any;
 
diff --git a/src/components/ui/Switch/switch.baremetal.scss b/src/components/ui/Switch/switch.baremetal.scss
new file mode 100644
index 000000000..37a792ddd
--- /dev/null
+++ b/src/components/ui/Switch/switch.baremetal.scss
@@ -0,0 +1,7 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-switch) { width: 4rem; height: 2rem; border: 1px solid var(--rad-ui-baremetal-black) !important; border-radius: 0 !important; background: var(--rad-ui-baremetal-white) !important; box-shadow: none !important; transition: none !important; }
+#{baremetal.$theme-root} :where(.rad-ui-switch[data-state="checked"]) { background: var(--rad-ui-baremetal-black) !important; border-color: var(--rad-ui-baremetal-black) !important; }
+#{baremetal.$theme-root} :where(.rad-ui-switch .rad-ui-switch-indicator) { left: 0.25rem; width: 1.5rem; height: 1.5rem; border: 1px solid var(--rad-ui-baremetal-black) !important; border-radius: 0 !important; background: var(--rad-ui-baremetal-black) !important; box-shadow: none !important; transition: none !important; }
+#{baremetal.$theme-root} :where(.rad-ui-switch .rad-ui-switch-indicator[data-state="checked"]) { transform: translateY(-50%) translateX(1.75rem) !important; background: var(--rad-ui-baremetal-white) !important; }
diff --git a/src/components/ui/TabNav/stories/TabNav.stories.tsx b/src/components/ui/TabNav/stories/TabNav.stories.tsx
index 81a96d371..150a9c79d 100644
--- a/src/components/ui/TabNav/stories/TabNav.stories.tsx
+++ b/src/components/ui/TabNav/stories/TabNav.stories.tsx
@@ -4,7 +4,7 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-    title: 'WIP/TabNav',
+    title: 'Components/TabNav',
     component: TabNav,
     render: (args: React.JSX.IntrinsicAttributes) => <SandboxEditor>
         <div >
diff --git a/src/components/ui/TabNav/tab-nav.baremetal.scss b/src/components/ui/TabNav/tab-nav.baremetal.scss
new file mode 100644
index 000000000..2fc7aae7b
--- /dev/null
+++ b/src/components/ui/TabNav/tab-nav.baremetal.scss
@@ -0,0 +1,6 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-tab-nav) { @include baremetal.surface(false); gap: 0; padding: 0; }
+#{baremetal.$theme-root} :where(.rad-ui-tab-nav-link) { @include baremetal.option-item; }
+#{baremetal.$theme-root} :where(.rad-ui-tab-nav-link.active) { @include baremetal.checked-item; }
diff --git a/src/components/ui/Table/stories/Table.stories.tsx b/src/components/ui/Table/stories/Table.stories.tsx
index 8ee7d3343..0a2f24ad8 100644
--- a/src/components/ui/Table/stories/Table.stories.tsx
+++ b/src/components/ui/Table/stories/Table.stories.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 const meta: Meta<typeof Table> = {
-    title: 'WIP/Table',
+    title: 'Components/Table',
     component: Table,
     decorators: [(Story) => (
         <SandboxEditor>
diff --git a/src/components/ui/Table/table.baremetal.scss b/src/components/ui/Table/table.baremetal.scss
new file mode 100644
index 000000000..dff263452
--- /dev/null
+++ b/src/components/ui/Table/table.baremetal.scss
@@ -0,0 +1,6 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-table-wrapper) { @include baremetal.surface; }
+#{baremetal.$theme-root} :where(.rad-ui-table th, .rad-ui-table td, .rad-ui-table tr) { @include baremetal.divider; }
+#{baremetal.$theme-root} :where(.rad-ui-table thead) { border-color: var(--rad-ui-baremetal-black) !important; background: var(--rad-ui-baremetal-white) !important; }
diff --git a/src/components/ui/Tabs/stories/Tabs.stories.tsx b/src/components/ui/Tabs/stories/Tabs.stories.tsx
index d40af26f8..77ebda2e8 100644
--- a/src/components/ui/Tabs/stories/Tabs.stories.tsx
+++ b/src/components/ui/Tabs/stories/Tabs.stories.tsx
@@ -7,7 +7,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<typeof Tabs> = {
-    title: 'WIP/Tabs',
+    title: 'Components/Tabs',
     component: Tabs,
     decorators: [(Story) => (
         <SandboxEditor>
diff --git a/src/components/ui/Tabs/tabs.baremetal.scss b/src/components/ui/Tabs/tabs.baremetal.scss
new file mode 100644
index 000000000..0b4e219f6
--- /dev/null
+++ b/src/components/ui/Tabs/tabs.baremetal.scss
@@ -0,0 +1,7 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-tabs-list) { @include baremetal.surface(false); gap: 0; padding: 0; }
+#{baremetal.$theme-root} :where(.rad-ui-tabs-trigger) { @include baremetal.option-item; }
+#{baremetal.$theme-root} :where(.rad-ui-tabs-trigger.active) { @include baremetal.checked-item; }
+#{baremetal.$theme-root} :where(.rad-ui-tab-content) { @include baremetal.surface; }
diff --git a/src/components/ui/Text/text.baremetal.scss b/src/components/ui/Text/text.baremetal.scss
new file mode 100644
index 000000000..2a5397718
--- /dev/null
+++ b/src/components/ui/Text/text.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-text) { @include baremetal.body-text; }
diff --git a/src/components/ui/TextArea/stories/TextArea.stories.tsx b/src/components/ui/TextArea/stories/TextArea.stories.tsx
index 54f2fe893..b702555b8 100644
--- a/src/components/ui/TextArea/stories/TextArea.stories.tsx
+++ b/src/components/ui/TextArea/stories/TextArea.stories.tsx
@@ -3,7 +3,7 @@ import TextArea from '../TextArea';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 export default {
-    title: 'WIP/TextArea',
+    title: 'Components/TextArea',
     component: TextArea
 } as any;
 
diff --git a/src/components/ui/TextArea/textarea.baremetal.scss b/src/components/ui/TextArea/textarea.baremetal.scss
new file mode 100644
index 000000000..0763c60ce
--- /dev/null
+++ b/src/components/ui/TextArea/textarea.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-text-area) { @include baremetal.input-like; }
diff --git a/src/components/ui/Theme/stories/Theme.stories.tsx b/src/components/ui/Theme/stories/Theme.stories.tsx
index 38b47d26b..6ab8669c6 100644
--- a/src/components/ui/Theme/stories/Theme.stories.tsx
+++ b/src/components/ui/Theme/stories/Theme.stories.tsx
@@ -12,7 +12,7 @@ const CardComponent = ({ appearance }: { appearance: 'light' | 'dark' }) => {
 };
 
 export default {
-    title: 'WIP/Theme',
+    title: 'Components/Theme',
     component: Theme,
     render: (args: React.JSX.IntrinsicAttributes) => {
         const [toggle, setToggle] = useState(false);
diff --git a/src/components/ui/Toggle/stories/Toggle.stories.tsx b/src/components/ui/Toggle/stories/Toggle.stories.tsx
index d7c6a4edb..fb9a28940 100644
--- a/src/components/ui/Toggle/stories/Toggle.stories.tsx
+++ b/src/components/ui/Toggle/stories/Toggle.stories.tsx
@@ -4,7 +4,7 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 import { Italic, Bold } from 'lucide-react';
 
 export default {
-    title: 'WIP/Toggle',
+    title: 'Components/Toggle',
     component: Toggle
 } as any;
 
diff --git a/src/components/ui/Toggle/toggle.baremetal.scss b/src/components/ui/Toggle/toggle.baremetal.scss
new file mode 100644
index 000000000..3de557080
--- /dev/null
+++ b/src/components/ui/Toggle/toggle.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-toggle) { @include baremetal.button-like; }
diff --git a/src/components/ui/ToggleGroup/stories/ToggleGroup.stories.tsx b/src/components/ui/ToggleGroup/stories/ToggleGroup.stories.tsx
index 315b49b53..8898b227c 100644
--- a/src/components/ui/ToggleGroup/stories/ToggleGroup.stories.tsx
+++ b/src/components/ui/ToggleGroup/stories/ToggleGroup.stories.tsx
@@ -4,7 +4,7 @@ import ToggleGroup from '../ToggleGroup';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 export default {
-    title: 'WIP/ToggleGroup',
+    title: 'Components/ToggleGroup',
     component: ToggleGroup
 } as any;
 
diff --git a/src/components/ui/ToggleGroup/toggle-group.baremetal.scss b/src/components/ui/ToggleGroup/toggle-group.baremetal.scss
new file mode 100644
index 000000000..a610a8eaf
--- /dev/null
+++ b/src/components/ui/ToggleGroup/toggle-group.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-toggle-group) { @include baremetal.surface(false); gap: 0; padding: 0; }
+#{baremetal.$theme-root} :where(.rad-ui-toggle-group-item) { @include baremetal.button-like; }
diff --git a/src/components/ui/Toolbar/toolbar.baremetal.scss b/src/components/ui/Toolbar/toolbar.baremetal.scss
new file mode 100644
index 000000000..62295e97d
--- /dev/null
+++ b/src/components/ui/Toolbar/toolbar.baremetal.scss
@@ -0,0 +1,6 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-toolbar) { @include baremetal.surface(false); gap: 0; padding: 0; }
+#{baremetal.$theme-root} :where(.rad-ui-toolbar-button, .rad-ui-toolbar-toggle-item) { @include baremetal.button-like; }
+#{baremetal.$theme-root} :where(.rad-ui-toolbar-separator) { @include baremetal.divider; }
diff --git a/src/components/ui/Tooltip/stories/Tooltip.stories.tsx b/src/components/ui/Tooltip/stories/Tooltip.stories.tsx
index ea0717043..2d9200d1f 100644
--- a/src/components/ui/Tooltip/stories/Tooltip.stories.tsx
+++ b/src/components/ui/Tooltip/stories/Tooltip.stories.tsx
@@ -5,7 +5,7 @@ import Tooltip from '../Tooltip';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 const meta: Meta<typeof Tooltip> = {
-    title: 'WIP/Tooltip',
+    title: 'Components/Tooltip',
     component: Tooltip
 };
 
diff --git a/src/components/ui/Tooltip/tooltip.baremetal.scss b/src/components/ui/Tooltip/tooltip.baremetal.scss
new file mode 100644
index 000000000..c5027d4be
--- /dev/null
+++ b/src/components/ui/Tooltip/tooltip.baremetal.scss
@@ -0,0 +1,4 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-tooltip-content-inner) { @include baremetal.surface; padding: 1.5rem; }
diff --git a/src/components/ui/Tree/stories/Tree.stories.tsx b/src/components/ui/Tree/stories/Tree.stories.tsx
index fdc1c21c3..08b9d1520 100644
--- a/src/components/ui/Tree/stories/Tree.stories.tsx
+++ b/src/components/ui/Tree/stories/Tree.stories.tsx
@@ -67,7 +67,7 @@ const items = [
     }
 ];
 export default {
-    title: 'WIP/Tree',
+    title: 'Components/Tree',
     component: Tree,
     render: () => <SandboxEditor>
         <div >
diff --git a/src/components/ui/Tree/tree.baremetal.scss b/src/components/ui/Tree/tree.baremetal.scss
new file mode 100644
index 000000000..92bd58c4a
--- /dev/null
+++ b/src/components/ui/Tree/tree.baremetal.scss
@@ -0,0 +1,5 @@
+/* stylelint-disable at-rule-no-unknown */
+@use "src/design-systems/baremetal/scope" as baremetal;
+
+#{baremetal.$theme-root} :where(.rad-ui-tree) { @include baremetal.surface; }
+#{baremetal.$theme-root} :where(.rad-ui-tree-item) { @include baremetal.option-item; }
diff --git a/src/design-systems/baremetal/_scope.scss b/src/design-systems/baremetal/_scope.scss
new file mode 100644
index 000000000..058fa49db
--- /dev/null
+++ b/src/design-systems/baremetal/_scope.scss
@@ -0,0 +1,159 @@
+/* stylelint-disable at-rule-no-unknown */
+$theme-root: ':where(body:not([data-rad-ui-design-system]), [data-rad-ui-design-system="baremetal"]) [data-rad-ui-theme]';
+$portal-root: ':where(body:not([data-rad-ui-design-system]), [data-rad-ui-design-system="baremetal"]) [data-rad-ui-portal-root]';
+
+@mixin button-like {
+    min-height: 2.75rem;
+    border: 1px solid var(--rad-ui-baremetal-black) !important;
+    border-radius: 0 !important;
+    background: var(--rad-ui-baremetal-subtle) !important;
+    color: var(--rad-ui-baremetal-black) !important;
+    box-shadow: none !important;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    transition: none !important;
+
+    &:hover {
+        border-color: var(--rad-ui-baremetal-black) !important;
+        background: var(--rad-ui-baremetal-muted) !important;
+        color: var(--rad-ui-baremetal-black) !important;
+    }
+
+    &:active,
+    &[data-state="on"],
+    &[data-state="checked"],
+    &[aria-pressed="true"],
+    &.active {
+        transform: none !important;
+        background: var(--rad-ui-baremetal-black) !important;
+        color: var(--rad-ui-baremetal-white) !important;
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: var(--rad-ui-ring-shadow-sm) !important;
+    }
+}
+
+@mixin surface($shadow: true) {
+    border: 1px solid var(--rad-ui-baremetal-black) !important;
+    border-radius: 0 !important;
+    background: var(--rad-ui-baremetal-white) !important;
+    color: var(--rad-ui-baremetal-black) !important;
+
+    @if $shadow {
+        box-shadow: var(--rad-ui-baremetal-shadow) !important;
+    } @else {
+        box-shadow: none !important;
+    }
+}
+
+@mixin title-text {
+    color: var(--rad-ui-baremetal-black) !important;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+}
+
+@mixin body-text {
+    color: var(--rad-ui-baremetal-black) !important;
+}
+
+@mixin option-item {
+    border-radius: 0 !important;
+    color: var(--rad-ui-baremetal-black) !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    transition: none !important;
+
+    &:hover,
+    &:focus-visible,
+    &[data-highlighted],
+    &[data-active="true"],
+    &[aria-selected="true"],
+    &.active {
+        outline: none;
+        background: var(--rad-ui-baremetal-black) !important;
+        color: var(--rad-ui-baremetal-white) !important;
+        box-shadow: none !important;
+    }
+}
+
+@mixin checked-item {
+    background: var(--rad-ui-baremetal-black) !important;
+    color: var(--rad-ui-baremetal-white) !important;
+    box-shadow: none !important;
+}
+
+@mixin input-like {
+    border: 1px solid var(--rad-ui-baremetal-black) !important;
+    border-radius: 0 !important;
+    background: var(--rad-ui-baremetal-white) !important;
+    color: var(--rad-ui-baremetal-black) !important;
+    box-shadow: none !important;
+    letter-spacing: 0.08em;
+
+    &::placeholder {
+        color: var(--rad-ui-baremetal-disabled);
+    }
+
+    &:focus,
+    &:focus-visible {
+        outline: none;
+        box-shadow: var(--rad-ui-ring-shadow-sm) !important;
+    }
+}
+
+@mixin square-control {
+    width: 1.625rem;
+    height: 1.625rem;
+    border: 1px solid var(--rad-ui-baremetal-black) !important;
+    border-radius: 0 !important;
+    background: var(--rad-ui-baremetal-white) !important;
+    color: var(--rad-ui-baremetal-white) !important;
+    box-shadow: none !important;
+    transition: none !important;
+
+    &:hover {
+        background: var(--rad-ui-baremetal-white) !important;
+        border-color: var(--rad-ui-baremetal-black) !important;
+    }
+
+    &[data-state="checked"],
+    &[data-state="indeterminate"],
+    &[aria-checked="true"] {
+        background: var(--rad-ui-baremetal-black) !important;
+        border-color: var(--rad-ui-baremetal-black) !important;
+        color: var(--rad-ui-baremetal-white) !important;
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: var(--rad-ui-ring-shadow-sm) !important;
+    }
+}
+
+@mixin chip-like {
+    border: 1px solid var(--rad-ui-baremetal-black) !important;
+    border-radius: 0 !important;
+    background: var(--rad-ui-baremetal-subtle) !important;
+    color: var(--rad-ui-baremetal-black) !important;
+    box-shadow: none !important;
+}
+
+@mixin track {
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: var(--rad-ui-baremetal-subtle) !important;
+    box-shadow: none !important;
+}
+
+@mixin fill {
+    border-radius: 0 !important;
+    background: var(--rad-ui-baremetal-black) !important;
+    box-shadow: none !important;
+}
+
+@mixin divider {
+    border-color: var(--rad-ui-baremetal-black) !important;
+}
+
diff --git a/src/design-systems/baremetal/default.scss b/src/design-systems/baremetal/default.scss
new file mode 100644
index 000000000..10f5fb19f
--- /dev/null
+++ b/src/design-systems/baremetal/default.scss
@@ -0,0 +1,135 @@
+@use "../clarity/default";
+@use "../../components/ui/Accordion/accordion.baremetal";
+@use "../../components/ui/AlertDialog/alert-dialog.baremetal";
+@use "../../components/ui/Avatar/avatar.baremetal";
+@use "../../components/ui/AvatarGroup/avatar-group.baremetal";
+@use "../../components/ui/Badge/badge.baremetal";
+@use "../../components/ui/BlockQuote/blockquote.baremetal";
+@use "../../components/ui/Button/button.baremetal";
+@use "../../components/ui/Callout/callout.baremetal";
+@use "../../components/ui/Card/card.baremetal";
+@use "../../components/ui/Checkbox/checkbox.baremetal";
+@use "../../components/ui/DataList/data-list.baremetal";
+@use "../../components/ui/Dialog/dialog.baremetal";
+@use "../../components/ui/Table/table.baremetal";
+@use "../../components/ui/Code/code.baremetal";
+@use "../../components/ui/Disclosure/disclosure.baremetal";
+@use "../../components/ui/Heading/heading.baremetal";
+@use "../../components/ui/HoverCard/hover-card.baremetal";
+@use "../../components/ui/Kbd/kbd.baremetal";
+@use "../../components/ui/Link/link.baremetal";
+@use "../../components/ui/Separator/separator.baremetal";
+@use "../../components/ui/Tabs/tabs.baremetal";
+@use "../../components/ui/Text/text.baremetal";
+@use "../../components/ui/TextArea/textarea.baremetal";
+@use "../../components/ui/Progress/progress.baremetal";
+@use "../../components/ui/Toggle/toggle.baremetal";
+@use "../../components/ui/ToggleGroup/toggle-group.baremetal";
+@use "../../components/ui/RadioGroup/radio-group.baremetal";
+@use "../../components/ui/Radio/radio.baremetal";
+@use "../../components/ui/RadioCards/radiocards.baremetal";
+@use "../../components/ui/Quote/quote.baremetal";
+@use "../../components/ui/Strong/strong.baremetal";
+@use "../../components/ui/Slider/slider.baremetal";
+@use "../../components/ui/ScrollArea/scroll-area.baremetal";
+@use "../../components/ui/Switch/switch.baremetal";
+@use "../../components/ui/Skeleton/skeleton.baremetal";
+@use "../../components/ui/Collapsible/collapsible.baremetal";
+@use "../../components/ui/TabNav/tab-nav.baremetal";
+@use "../../components/ui/Select/select.baremetal";
+@use "../../components/ui/Tree/tree.baremetal";
+@use "../../components/ui/CheckboxGroup/checkbox-group.baremetal";
+@use "../../components/ui/CheckboxCards/checkbox-cards.baremetal";
+@use "../../components/ui/NavigationMenu/navigation-menu.baremetal";
+@use "../../components/ui/DropdownMenu/dropdown-menu.baremetal";
+@use "../../components/ui/NumberField/number-field.baremetal";
+@use "../../components/ui/ContextMenu/context-menu.baremetal";
+@use "../../components/ui/Menubar/menubar.baremetal";
+@use "../../components/ui/Splitter/splitter.baremetal";
+@use "../../components/ui/Toolbar/toolbar.baremetal";
+@use "../../components/ui/Steps/steps.baremetal";
+@use "../../components/ui/Minimap/minimap.baremetal";
+@use "../../components/ui/Combobox/combobox.baremetal";
+@use "../../components/ui/Tooltip/tooltip.baremetal";
+@use "../../components/ui/Spinner/spinner.baremetal";
+@use "scope";
+
+#{scope.$theme-root} {
+    --rad-ui-baremetal-black: #282828;
+    --rad-ui-baremetal-white: #fff;
+    --rad-ui-baremetal-canvas: #fff;
+    --rad-ui-baremetal-panel: #fff;
+    --rad-ui-baremetal-subtle: #eee;
+    --rad-ui-baremetal-muted: #e8e8e8;
+    --rad-ui-baremetal-disabled: #a7a7a7;
+    --rad-ui-baremetal-shadow: 8px 8px 0 #e8e8e8;
+    --rad-ui-baremetal-shadow-sm: 4px 4px 0 #e8e8e8;
+    --rad-ui-surface-canvas: var(--rad-ui-baremetal-canvas);
+    --rad-ui-surface-panel: var(--rad-ui-baremetal-panel);
+    --rad-ui-surface-subtle: var(--rad-ui-baremetal-subtle);
+    --rad-ui-surface-muted: var(--rad-ui-baremetal-muted);
+    --rad-ui-surface-hover: var(--rad-ui-baremetal-subtle);
+    --rad-ui-surface-inverse: var(--rad-ui-baremetal-black);
+    --rad-ui-border-soft: var(--rad-ui-baremetal-black);
+    --rad-ui-border-default: var(--rad-ui-baremetal-black);
+    --rad-ui-border-strong: var(--rad-ui-baremetal-black);
+    --rad-ui-text-primary: var(--rad-ui-baremetal-black);
+    --rad-ui-text-secondary: var(--rad-ui-baremetal-black);
+    --rad-ui-text-muted: #777;
+    --rad-ui-text-strong: var(--rad-ui-baremetal-black);
+    --rad-ui-text-inverse: var(--rad-ui-baremetal-white);
+    --rad-ui-surface: var(--rad-ui-baremetal-panel);
+    --rad-ui-border: var(--rad-ui-baremetal-black);
+    --rad-ui-ring: var(--rad-ui-baremetal-black);
+    --rad-ui-ring-strong: var(--rad-ui-baremetal-black);
+    --rad-ui-ring-shadow: 0 0 0 2px var(--rad-ui-baremetal-white), 0 0 0 4px var(--rad-ui-baremetal-black);
+    --rad-ui-ring-shadow-sm: 0 0 0 1px var(--rad-ui-baremetal-white), 0 0 0 3px var(--rad-ui-baremetal-black);
+    --rad-ui-ring-shadow-inset: inset 0 0 0 2px var(--rad-ui-baremetal-black);
+    --rad-ui-shadow-none: none;
+    --rad-ui-shadow-xs: none;
+    --rad-ui-shadow-sm: none;
+    --rad-ui-shadow-md: var(--rad-ui-baremetal-shadow-sm);
+    --rad-ui-shadow-lg: var(--rad-ui-baremetal-shadow);
+    --rad-ui-shadow-xl: var(--rad-ui-baremetal-shadow);
+    --rad-ui-shadow-full: var(--rad-ui-baremetal-shadow);
+    --rad-ui-elevation-xs-shadow: none;
+    --rad-ui-elevation-sm-shadow: var(--rad-ui-baremetal-shadow-sm);
+    --rad-ui-elevation-md-shadow: var(--rad-ui-baremetal-shadow);
+    --rad-ui-elevation-lg-shadow: var(--rad-ui-baremetal-shadow);
+    --rad-ui-elevation-xs-border: 1px solid var(--rad-ui-baremetal-black);
+    --rad-ui-elevation-sm-border: 1px solid var(--rad-ui-baremetal-black);
+    --rad-ui-elevation-md-border: 1px solid var(--rad-ui-baremetal-black);
+    --rad-ui-elevation-lg-border: 1px solid var(--rad-ui-baremetal-black);
+    --rad-ui-elevation-xs-background: var(--rad-ui-baremetal-white);
+    --rad-ui-elevation-sm-background: var(--rad-ui-baremetal-white);
+    --rad-ui-elevation-md-background: var(--rad-ui-baremetal-white);
+    --rad-ui-elevation-lg-background: var(--rad-ui-baremetal-white);
+
+    color: var(--rad-ui-text-primary);
+    background: var(--rad-ui-surface-canvas);
+    font-family: var(--rad-ui-font-sans);
+}
+
+#{scope.$theme-root} *,
+#{scope.$portal-root} * {
+    letter-spacing: 0.08em;
+}
+
+#{scope.$theme-root} [class*="rad-ui-"],
+#{scope.$portal-root} [class*="rad-ui-"] {
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    transition: none !important;
+}
+
+#{scope.$theme-root} :where([data-disabled], :disabled, .disabled) {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+#{scope.$theme-root}::selection,
+#{scope.$theme-root} ::selection {
+    background-color: var(--rad-ui-baremetal-black);
+    color: var(--rad-ui-baremetal-white);
+}
+