diff --git a/.eslintignore b/.eslintignore
index 06cadd7f2..723d4c180 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,3 @@
 .workshop
 dist
 storybook-static
-theme.js
diff --git a/.gitignore b/.gitignore
index 49e75eb54..f0f23da9b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,5 +7,3 @@ dist
 etc
 node_modules
 storybook-static
-_visual-editing.js
-theme.js
diff --git a/.storybook/decorators/withSanityTheme.decorator.tsx b/.storybook/decorators/withSanityTheme.decorator.tsx
index 6cdc5f6fa..e5b252fc8 100644
--- a/.storybook/decorators/withSanityTheme.decorator.tsx
+++ b/.storybook/decorators/withSanityTheme.decorator.tsx
@@ -2,7 +2,9 @@ import {DecoratorHelpers} from '@storybook/addon-themes'
 import {StoryFn} from '@storybook/react'
 import React from 'react'
 import {createGlobalStyle} from 'styled-components'
-import {Card, ThemeProvider, studioTheme} from '../../src/core'
+import { Card } from '../../src/core/primitives/card/card'
+import { ThemeProvider } from '../../src/core/theme/themeProvider'
+import { studioTheme } from '../../src/core/_compat'
 
 const {initializeThemeState, pluckThemeFromContext, useThemeParameters} = DecoratorHelpers
 
diff --git a/figma/package.config.ts b/figma/package.config.ts
index 20e21120a..3e2df6b4d 100644
--- a/figma/package.config.ts
+++ b/figma/package.config.ts
@@ -1,9 +1,6 @@
 import {defineConfig} from '@sanity/pkg-utils'
 
 export default defineConfig({
-  babel: {
-    plugins: ['@babel/plugin-transform-object-rest-spread'],
-  },
   dist: './dist',
   src: './src',
   tsconfig: './tsconfig.dist.json',
diff --git a/figma/package.json b/figma/package.json
index 0d24b12dd..f259ad74a 100644
--- a/figma/package.json
+++ b/figma/package.json
@@ -21,7 +21,6 @@
     "watch": "pkg watch --strict"
   },
   "devDependencies": {
-    "@babel/plugin-transform-object-rest-spread": "^7.25.9",
     "@figma/plugin-typings": "^1.109.0",
     "@sanity/color": "^3.0.6",
     "@sanity/ui": "workspace:*",
diff --git a/figma/tsconfig.dist.json b/figma/tsconfig.dist.json
index 59156a586..486a7f24a 100644
--- a/figma/tsconfig.dist.json
+++ b/figma/tsconfig.dist.json
@@ -1,13 +1,10 @@
 {
-  "extends": "../tsconfig.settings",
+  "extends": "@sanity/pkg-utils/tsconfig/recommended.json",
   "include": ["./src"],
   "exclude": ["./src/**/*.test.ts"],
   "compilerOptions": {
     "rootDir": ".",
     "outDir": "./dist",
-    "target": "ES6",
-    "lib": ["ES2020"],
-    "typeRoots": ["./node_modules/@types", "./node_modules/@figma"],
-    "resolveJsonModule": true
+    "typeRoots": ["./node_modules/@types", "./node_modules/@figma"]
   }
 }
diff --git a/figma/tsconfig.json b/figma/tsconfig.json
index a3c95565c..5b211b792 100644
--- a/figma/tsconfig.json
+++ b/figma/tsconfig.json
@@ -1,12 +1,9 @@
 {
-  "extends": "../tsconfig.settings",
+  "extends": "@sanity/pkg-utils/tsconfig/recommended.json",
   "include": ["../exports", "../src", "../typings", "./src"],
   "compilerOptions": {
-    "composite": true,
     "rootDir": "..",
     "outDir": "./dist/types",
-    "target": "ES6",
-    "lib": ["ES2020"],
     "paths": {
       "@sanity/ui/*": ["../exports/*"],
       "@sanity/ui": ["../exports"]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 68cc8a941..53d1f0a28 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -273,9 +273,6 @@ importers:
 
   figma:
     devDependencies:
-      '@babel/plugin-transform-object-rest-spread':
-        specifier: ^7.25.9
-        version: 7.25.9(@babel/core@7.26.10)
       '@figma/plugin-typings':
         specifier: ^1.109.0
         version: 1.109.0
diff --git a/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx b/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx
index 85716b0f2..659f5c254 100644
--- a/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx
+++ b/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx
@@ -9,7 +9,7 @@ import {
   Text,
 } from '@sanity/ui'
 import {useCallback, useState} from 'react'
-import {Popover} from '../../../primitives'
+import { Popover } from '../../../primitives/popover/popover'
 import countries from '../__fixtures__/countries'
 import {AutocompleteProps} from '../autocomplete'
 import {ExampleOption} from './types'
diff --git a/src/core/components/autocomplete/autocomplete.styles.tsx b/src/core/components/autocomplete/autocomplete.styles.tsx
index d1fc6a9cc..964bcc48d 100644
--- a/src/core/components/autocomplete/autocomplete.styles.tsx
+++ b/src/core/components/autocomplete/autocomplete.styles.tsx
@@ -1,6 +1,6 @@
 import {SpinnerIcon} from '@sanity/icons'
 import {styled, keyframes} from 'styled-components'
-import {Box} from '../../primitives'
+import { Box } from '../../primitives/box/box'
 
 /**
  * @internal
diff --git a/src/core/components/autocomplete/autocomplete.tsx b/src/core/components/autocomplete/autocomplete.tsx
index 4946575c3..69eb46a6f 100644
--- a/src/core/components/autocomplete/autocomplete.tsx
+++ b/src/core/components/autocomplete/autocomplete.tsx
@@ -18,20 +18,17 @@ import {
   useRef,
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
-import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp} from '../../hooks'
-import {
-  Box,
-  BoxProps,
-  Button,
-  Card,
-  Popover,
-  PopoverProps,
-  Stack,
-  Text,
-  TextInput,
-} from '../../primitives'
-import {Radius} from '../../types'
+import { _hasFocus, focusFirstDescendant } from '../../helpers/focus'
+import { _raf } from '../../helpers/animation'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Box, BoxProps } from '../../primitives/box/box'
+import { Button } from '../../primitives/button/button'
+import { Card } from '../../primitives/card/card'
+import { Popover, PopoverProps } from '../../primitives/popover/popover'
+import { Stack } from '../../primitives/stack/stack'
+import { Text } from '../../primitives/text/text'
+import { TextInput } from '../../primitives/textInput/textInput'
+import { Radius } from '../../types/radius'
 import {AnimatedSpinnerIcon, ListBox, StyledAutocomplete} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
diff --git a/src/core/components/autocomplete/autocompleteOption.tsx b/src/core/components/autocomplete/autocompleteOption.tsx
index 1de575bfb..59a20c677 100644
--- a/src/core/components/autocomplete/autocompleteOption.tsx
+++ b/src/core/components/autocomplete/autocompleteOption.tsx
@@ -1,5 +1,5 @@
 import {useCallback} from 'react'
-import {_isEnterToClickElement} from '../../helpers'
+import { _isEnterToClickElement } from '../../helpers/element'
 
 export interface AutocompleteOptionProps {
   children: React.ReactNode
diff --git a/src/core/components/autocomplete/constants.ts b/src/core/components/autocomplete/constants.ts
index cfa688496..3180ebbee 100644
--- a/src/core/components/autocomplete/constants.ts
+++ b/src/core/components/autocomplete/constants.ts
@@ -1,4 +1,4 @@
-import {Placement} from '../../types'
+import { Placement } from '../../types/placement'
 
 /**
  * @internal
diff --git a/src/core/components/autocomplete/types.ts b/src/core/components/autocomplete/types.ts
index 6e715a80d..05b076531 100644
--- a/src/core/components/autocomplete/types.ts
+++ b/src/core/components/autocomplete/types.ts
@@ -1,4 +1,4 @@
-import {ButtonProps} from '../../primitives'
+import { ButtonProps } from '../../primitives/button/button'
 
 /**
  * @public
diff --git a/src/core/components/breadcrumbs/breadcrumbs.styles.ts b/src/core/components/breadcrumbs/breadcrumbs.styles.ts
index fba9701dd..61d4b7293 100644
--- a/src/core/components/breadcrumbs/breadcrumbs.styles.ts
+++ b/src/core/components/breadcrumbs/breadcrumbs.styles.ts
@@ -1,5 +1,5 @@
 import {styled} from 'styled-components'
-import {Button} from '../../primitives'
+import { Button } from '../../primitives/button/button'
 
 export const StyledBreadcrumbs = styled.ol`
   margin: 0;
diff --git a/src/core/components/breadcrumbs/breadcrumbs.tsx b/src/core/components/breadcrumbs/breadcrumbs.tsx
index 8dcf409e4..ffc86680a 100644
--- a/src/core/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/core/components/breadcrumbs/breadcrumbs.tsx
@@ -8,8 +8,12 @@ import {
   useRef,
   useState,
 } from 'react'
-import {useArrayProp, useClickOutsideEvent} from '../../hooks'
-import {Box, Popover, Stack, Text} from '../../primitives'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { useClickOutsideEvent } from '../../hooks/useClickOutsideEvent'
+import { Box } from '../../primitives/box/box'
+import { Popover } from '../../primitives/popover/popover'
+import { Stack } from '../../primitives/stack/stack'
+import { Text } from '../../primitives/text/text'
 import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
 
 /**
diff --git a/src/core/components/dialog/__workshop__/activate.tsx b/src/core/components/dialog/__workshop__/activate.tsx
index 245005a79..068f9ff7e 100644
--- a/src/core/components/dialog/__workshop__/activate.tsx
+++ b/src/core/components/dialog/__workshop__/activate.tsx
@@ -1,7 +1,13 @@
 import {useState} from 'react'
-import {Stack, Flex, Button, Text} from '../../../primitives'
-import {Layer, LayerProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
+import { Stack } from '../../../primitives/stack/stack'
+import { Flex } from '../../../primitives/flex/flex'
+import { Button } from '../../../primitives/button/button'
+import { Text } from '../../../primitives/text/text'
+import { Layer } from '../../../utils/layer/layer'
+import { LayerProvider } from '../../../utils/layer/layerProvider'
+import { Menu } from '../../menu/menu'
+import { MenuButton } from '../../menu/menuButton'
+import { MenuItem } from '../../menu/menuItem'
 import {Dialog} from '../dialog'
 
 export default function LayeringFocusStory() {
diff --git a/src/core/components/dialog/__workshop__/panes.tsx b/src/core/components/dialog/__workshop__/panes.tsx
index 4bb51f24b..fdfd7dc9f 100644
--- a/src/core/components/dialog/__workshop__/panes.tsx
+++ b/src/core/components/dialog/__workshop__/panes.tsx
@@ -1,8 +1,14 @@
 import {useCallback, useState} from 'react'
 import {styled} from 'styled-components'
-import {Box, Button, Card, Flex} from '../../../primitives'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
+import { Box } from '../../../primitives/box/box'
+import { Button } from '../../../primitives/button/button'
+import { Card } from '../../../primitives/card/card'
+import { Flex } from '../../../primitives/flex/flex'
+import { BoundaryElementProvider } from '../../../utils/boundaryElement/boundaryElementProvider'
+import { PortalProvider } from '../../../utils/portal/portalProvider'
+import { Menu } from '../../menu/menu'
+import { MenuButton } from '../../menu/menuButton'
+import { MenuItem } from '../../menu/menuItem'
 import {Dialog} from '../dialog'
 
 export default function PanesStory() {
diff --git a/src/core/components/dialog/__workshop__/wrapped.tsx b/src/core/components/dialog/__workshop__/wrapped.tsx
index 389f9658d..4d5f4f28e 100644
--- a/src/core/components/dialog/__workshop__/wrapped.tsx
+++ b/src/core/components/dialog/__workshop__/wrapped.tsx
@@ -1,6 +1,8 @@
 import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
-import {Box, Button} from '../../../primitives'
-import {LayerProvider, useLayer} from '../../../utils'
+import { Box } from '../../../primitives/box/box'
+import { Button } from '../../../primitives/button/button'
+import { LayerProvider } from '../../../utils/layer/layerProvider'
+import { useLayer } from '../../../utils/layer/useLayer'
 import {Dialog, DialogProps} from '../dialog'
 
 export default function WrappedStory() {
diff --git a/src/core/components/dialog/dialog.tsx b/src/core/components/dialog/dialog.tsx
index ed71d2054..6c6f07382 100644
--- a/src/core/components/dialog/dialog.tsx
+++ b/src/core/components/dialog/dialog.tsx
@@ -2,24 +2,28 @@ import {CloseIcon} from '@sanity/icons'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {
-  containsOrEqualsElement,
-  focusFirstDescendant,
-  focusLastDescendant,
-  isHTMLElement,
-} from '../../helpers'
-import {
-  useArrayProp,
-  useClickOutsideEvent,
-  useGlobalKeyDown,
-  usePrefersReducedMotion,
-} from '../../hooks'
-import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
+import { containsOrEqualsElement, isHTMLElement } from '../../helpers/element'
+import { focusFirstDescendant, focusLastDescendant } from '../../helpers/focus'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { useClickOutsideEvent } from '../../hooks/useClickOutsideEvent'
+import { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown'
+import { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion'
+import { Box } from '../../primitives/box/box'
+import { Button } from '../../primitives/button/button'
+import { Card } from '../../primitives/card/card'
+import { Container } from '../../primitives/container/container'
+import { Flex } from '../../primitives/flex/flex'
+import { Text } from '../../primitives/text/text'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
-import {useTheme_v2} from '../../theme'
-import {DialogPosition, Radius} from '../../types'
-import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
+import { useTheme_v2 } from '../../theme/useTheme'
+import { DialogPosition } from '../../types/dialog'
+import { Radius } from '../../types/radius'
+import { Layer, LayerProps } from '../../utils/layer/layer'
+import { Portal } from '../../utils/portal/portal'
+import { useBoundaryElement } from '../../utils/boundaryElement/useBoundaryElement'
+import { useLayer } from '../../utils/layer/useLayer'
+import { usePortal } from '../../utils/portal/usePortal'
 import {
   animationDialogStyle,
   AnimationDialogStyleProps,
diff --git a/src/core/components/dialog/dialogContext.ts b/src/core/components/dialog/dialogContext.ts
index e1e669364..bc0ae8e7d 100644
--- a/src/core/components/dialog/dialogContext.ts
+++ b/src/core/components/dialog/dialogContext.ts
@@ -1,5 +1,5 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {DialogPosition} from '../../types'
+import { DialogPosition } from '../../types/dialog'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
diff --git a/src/core/components/dialog/dialogProvider.tsx b/src/core/components/dialog/dialogProvider.tsx
index c81288191..b2328cb5b 100644
--- a/src/core/components/dialog/dialogProvider.tsx
+++ b/src/core/components/dialog/dialogProvider.tsx
@@ -1,5 +1,5 @@
 import {useMemo} from 'react'
-import {DialogPosition} from '../../types'
+import { DialogPosition } from '../../types/dialog'
 import {DialogContext, DialogContextValue} from './dialogContext'
 
 /**
diff --git a/src/core/components/dialog/styles.ts b/src/core/components/dialog/styles.ts
index 59902f8c7..bae0d2d1c 100644
--- a/src/core/components/dialog/styles.ts
+++ b/src/core/components/dialog/styles.ts
@@ -1,7 +1,8 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {_responsive, ThemeProps} from '../../styles'
-import {DialogPosition} from '../../types'
+import { _responsive } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
+import { DialogPosition } from '../../types/dialog'
 
 /**
  * @internal
diff --git a/src/core/components/hotkeys/hotkeys.tsx b/src/core/components/hotkeys/hotkeys.tsx
index bb73903af..30f52ec17 100644
--- a/src/core/components/hotkeys/hotkeys.tsx
+++ b/src/core/components/hotkeys/hotkeys.tsx
@@ -1,8 +1,9 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {Inline, KBD} from '../../primitives'
-import {Radius} from '../../types'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Inline } from '../../primitives/inline/inline'
+import { KBD } from '../../primitives/kbd/kbd'
+import { Radius } from '../../types/radius'
 
 /**
  * @public
diff --git a/src/core/components/menu/__workshop__/avatarMenu.tsx b/src/core/components/menu/__workshop__/avatarMenu.tsx
index 9f2f66efe..98938965c 100644
--- a/src/core/components/menu/__workshop__/avatarMenu.tsx
+++ b/src/core/components/menu/__workshop__/avatarMenu.tsx
@@ -1,6 +1,11 @@
 import {UsersIcon} from '@sanity/icons'
-import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
-import {Hotkeys} from '../../hotkeys'
+import { Avatar } from '../../../primitives/avatar/avatar'
+import { Badge } from '../../../primitives/badge/badge'
+import { Box } from '../../../primitives/box/box'
+import { Button } from '../../../primitives/button/button'
+import { Flex } from '../../../primitives/flex/flex'
+import { Text } from '../../../primitives/text/text'
+import { Hotkeys } from '../../hotkeys/hotkeys'
 import {Menu} from '../menu'
 import {MenuButton} from '../menuButton'
 import {MenuItem} from '../menuItem'
diff --git a/src/core/components/menu/__workshop__/customSelectedState.tsx b/src/core/components/menu/__workshop__/customSelectedState.tsx
index 97e8e4cbc..7fcd82cc8 100644
--- a/src/core/components/menu/__workshop__/customSelectedState.tsx
+++ b/src/core/components/menu/__workshop__/customSelectedState.tsx
@@ -1,6 +1,7 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {useSelect} from '@sanity/ui-workshop'
-import {Box, Button} from '../../../primitives'
+import { Box } from '../../../primitives/box/box'
+import { Button } from '../../../primitives/button/button'
 import {Menu} from '../menu'
 import {MenuButton} from '../menuButton'
 import {MenuItem} from '../menuItem'
diff --git a/src/core/components/menu/__workshop__/shouldFocus.tsx b/src/core/components/menu/__workshop__/shouldFocus.tsx
index 47772999d..47643a9f1 100644
--- a/src/core/components/menu/__workshop__/shouldFocus.tsx
+++ b/src/core/components/menu/__workshop__/shouldFocus.tsx
@@ -1,7 +1,9 @@
 import {useSelect} from '@sanity/ui-workshop'
 import {Fragment, useCallback, useState} from 'react'
-import {Button, Flex, Popover} from '../../../primitives'
-import {LayerProvider} from '../../../utils'
+import { Button } from '../../../primitives/button/button'
+import { Flex } from '../../../primitives/flex/flex'
+import { Popover } from '../../../primitives/popover/popover'
+import { LayerProvider } from '../../../utils/layer/layerProvider'
 import {Menu} from '../menu'
 import {MenuDivider} from '../menuDivider'
 import {MenuItem} from '../menuItem'
diff --git a/src/core/components/menu/helpers.ts b/src/core/components/menu/helpers.ts
index 54889d8b6..7a41730f4 100644
--- a/src/core/components/menu/helpers.ts
+++ b/src/core/components/menu/helpers.ts
@@ -1,4 +1,4 @@
-import {isHTMLAnchorElement, isHTMLButtonElement} from '../../helpers'
+import { isHTMLAnchorElement, isHTMLButtonElement } from '../../helpers/element'
 
 /**
  * @internal
diff --git a/src/core/components/menu/menu.test.tsx b/src/core/components/menu/menu.test.tsx
index 70184b549..4311e9c41 100644
--- a/src/core/components/menu/menu.test.tsx
+++ b/src/core/components/menu/menu.test.tsx
@@ -3,7 +3,7 @@
 /* eslint-disable no-console */
 
 import React, {useCallback, useMemo} from 'react'
-import {render} from '../../../../test'
+import { render } from '../../../../test/utils'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
 
diff --git a/src/core/components/menu/menu.tsx b/src/core/components/menu/menu.tsx
index 08ccbe803..8c4ef2fa6 100644
--- a/src/core/components/menu/menu.tsx
+++ b/src/core/components/menu/menu.tsx
@@ -1,9 +1,11 @@
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
-import {Box, Stack} from '../../primitives'
+import { useClickOutsideEvent } from '../../hooks/useClickOutsideEvent'
+import { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown'
+import { Box } from '../../primitives/box/box'
+import { Stack } from '../../primitives/stack/stack'
 import {ResponsivePaddingProps} from '../../primitives/types'
-import {useLayer} from '../../utils'
+import { useLayer } from '../../utils/layer/useLayer'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenuController} from './useMenuController'
 
diff --git a/src/core/components/menu/menuButton.tsx b/src/core/components/menu/menuButton.tsx
index 144327b74..dc712a422 100644
--- a/src/core/components/menu/menuButton.tsx
+++ b/src/core/components/menu/menuButton.tsx
@@ -9,8 +9,9 @@ import {
   useRef,
   useImperativeHandle,
 } from 'react'
-import {Popover, PopoverProps} from '../../primitives'
-import {Placement, Radius} from '../../types'
+import { Popover, PopoverProps } from '../../primitives/popover/popover'
+import { Placement } from '../../types/placement'
+import { Radius } from '../../types/radius'
 import {MenuProps} from './menu'
 
 /**
diff --git a/src/core/components/menu/menuGroup.tsx b/src/core/components/menu/menuGroup.tsx
index 9dee902af..05d3b648f 100644
--- a/src/core/components/menu/menuGroup.tsx
+++ b/src/core/components/menu/menuGroup.tsx
@@ -1,11 +1,15 @@
 import {ChevronRightIcon} from '@sanity/icons'
 import {isValidElement, useCallback, useEffect, useState} from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
-import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {useRootTheme} from '../../theme'
-import {Radius, SelectableTone} from '../../types'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Box } from '../../primitives/box/box'
+import { Flex } from '../../primitives/flex/flex'
+import { Popover, PopoverProps } from '../../primitives/popover/popover'
+import { Text } from '../../primitives/text/text'
+import { Selectable } from '../../primitives/_selectable/selectable'
+import { useRootTheme } from '../../theme/useRootTheme'
+import { Radius } from '../../types/radius'
+import { SelectableTone } from '../../types/selectable'
 import {Menu, MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
diff --git a/src/core/components/menu/menuItem.tsx b/src/core/components/menu/menuItem.tsx
index 0210d5a9c..97656750c 100644
--- a/src/core/components/menu/menuItem.tsx
+++ b/src/core/components/menu/menuItem.tsx
@@ -9,13 +9,15 @@ import {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
-import {Box, Flex, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Box } from '../../primitives/box/box'
+import { Flex } from '../../primitives/flex/flex'
+import { Text } from '../../primitives/text/text'
+import { Selectable } from '../../primitives/_selectable/selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
-import {useRootTheme} from '../../theme'
+import { useRootTheme } from '../../theme/useRootTheme'
 import {SelectableTone} from '../../types/selectable'
-import {Hotkeys} from '../hotkeys'
+import { Hotkeys } from '../hotkeys/hotkeys'
 import {useMenu} from './useMenu'
 
 /**
diff --git a/src/core/components/skeleton/skeleton.tsx b/src/core/components/skeleton/skeleton.tsx
index a5a5103a2..607e25fc1 100644
--- a/src/core/components/skeleton/skeleton.tsx
+++ b/src/core/components/skeleton/skeleton.tsx
@@ -1,8 +1,9 @@
 import {forwardRef, useEffect, useState} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {Box} from '../../primitives'
-import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Box } from '../../primitives/box/box'
+import { BoxProps } from '../../primitives/box/box'
+import { ResponsiveRadiusProps } from '../../primitives/types'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
 
diff --git a/src/core/components/skeleton/textSkeleton.tsx b/src/core/components/skeleton/textSkeleton.tsx
index ba0967188..f79e68409 100644
--- a/src/core/components/skeleton/textSkeleton.tsx
+++ b/src/core/components/skeleton/textSkeleton.tsx
@@ -1,8 +1,9 @@
 import {ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {ThemeProps, _responsive} from '../../styles'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { ThemeProps } from '../../styles/types'
+import { _responsive } from '../../styles/helpers'
 import {Skeleton, SkeletonProps} from './skeleton'
 
 const StyledSkeleton = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
diff --git a/src/core/components/tab/tab.tsx b/src/core/components/tab/tab.tsx
index 897bcf25a..a3bbb2ac7 100644
--- a/src/core/components/tab/tab.tsx
+++ b/src/core/components/tab/tab.tsx
@@ -1,7 +1,7 @@
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {Button} from '../../primitives'
-import {ButtonTone} from '../../types'
+import { Button } from '../../primitives/button/button'
+import { ButtonTone } from '../../types/button'
 
 /**
  * @public
diff --git a/src/core/components/tab/tabList.tsx b/src/core/components/tab/tabList.tsx
index 016092e28..a9503a62f 100644
--- a/src/core/components/tab/tabList.tsx
+++ b/src/core/components/tab/tabList.tsx
@@ -1,6 +1,6 @@
 import {cloneElement, forwardRef, useCallback, useState, Children, isValidElement} from 'react'
 import {styled} from 'styled-components'
-import {Inline, InlineProps} from '../../primitives'
+import { Inline, InlineProps } from '../../primitives/inline/inline'
 
 /**
  * @public
diff --git a/src/core/components/tab/tabPanel.tsx b/src/core/components/tab/tabPanel.tsx
index 0f98eb7cb..216fa82dd 100644
--- a/src/core/components/tab/tabPanel.tsx
+++ b/src/core/components/tab/tabPanel.tsx
@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import {Box, BoxProps} from '../../primitives'
+import { Box, BoxProps } from '../../primitives/box/box'
 
 /**
  * @public
diff --git a/src/core/components/toast/styles.ts b/src/core/components/toast/styles.ts
index 64dedcf87..5e3912b7d 100644
--- a/src/core/components/toast/styles.ts
+++ b/src/core/components/toast/styles.ts
@@ -1,7 +1,9 @@
 import {styled} from 'styled-components'
-import {ThemeColorStateToneKey, getTheme_v2} from '../../../theme'
-import {Card, Flex} from '../../primitives'
-import type {ButtonTone} from '../../types'
+import { ThemeColorStateToneKey } from '../../../theme/system/color/_system'
+import { getTheme_v2 } from '../../../theme/versioning/getTheme_v2'
+import { Card } from '../../primitives/card/card'
+import { Flex } from '../../primitives/flex/flex'
+import type { ButtonTone } from '../../types/button'
 
 const LOADING_BAR_HEIGHT = 2
 
diff --git a/src/core/components/toast/toast.test.tsx b/src/core/components/toast/toast.test.tsx
index b21c21837..2c2089cd6 100644
--- a/src/core/components/toast/toast.test.tsx
+++ b/src/core/components/toast/toast.test.tsx
@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import {render} from '../../../../test'
+import { render } from '../../../../test/utils'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'
 import {useToast} from './useToast'
diff --git a/src/core/components/toast/toast.tsx b/src/core/components/toast/toast.tsx
index 3e6fbaf8a..8ef753ab0 100644
--- a/src/core/components/toast/toast.tsx
+++ b/src/core/components/toast/toast.tsx
@@ -1,7 +1,11 @@
 import {CloseIcon} from '@sanity/icons'
 import {motion, type Variant, type Variants} from 'framer-motion'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box, Button, Flex, Stack, Text} from '../../primitives'
+import { Box } from '../../primitives/box/box'
+import { Button } from '../../primitives/button/button'
+import { Flex } from '../../primitives/flex/flex'
+import { Stack } from '../../primitives/stack/stack'
+import { Text } from '../../primitives/text/text'
 
 import {
   LoadingBar,
diff --git a/src/core/components/toast/toastLayer.tsx b/src/core/components/toast/toastLayer.tsx
index e8734a4e9..26896ea53 100644
--- a/src/core/components/toast/toastLayer.tsx
+++ b/src/core/components/toast/toastLayer.tsx
@@ -1,6 +1,6 @@
 import {styled} from 'styled-components'
-import {Grid} from '../../primitives/grid'
-import {useLayer} from '../../utils'
+import { Grid } from '../../primitives/grid/grid'
+import { useLayer } from '../../utils/layer/useLayer'
 
 /**
  * @public
diff --git a/src/core/components/toast/toastProvider.tsx b/src/core/components/toast/toastProvider.tsx
index 25ec65ae0..b894b5c49 100644
--- a/src/core/components/toast/toastProvider.tsx
+++ b/src/core/components/toast/toastProvider.tsx
@@ -1,7 +1,7 @@
 import {AnimatePresence} from 'framer-motion'
 import {startTransition, useMemo, useState} from 'react'
 import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../utils'
+import { LayerProvider } from '../../utils/layer/layerProvider'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
 import {ToastLayer, type ToastLayerProps} from './toastLayer'
diff --git a/src/core/components/tree/style.ts b/src/core/components/tree/style.ts
index a2f21587d..e791ed216 100644
--- a/src/core/components/tree/style.ts
+++ b/src/core/components/tree/style.ts
@@ -1,7 +1,8 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
+import { rem } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
+import { _cardColorStyle } from '../../styles/card/_cardColorStyle'
 
 export function treeItemRootStyle(): ReturnType<typeof css> {
   return css`
diff --git a/src/core/components/tree/tree.tsx b/src/core/components/tree/tree.tsx
index 4c2608f8a..31e2ea54d 100644
--- a/src/core/components/tree/tree.tsx
+++ b/src/core/components/tree/tree.tsx
@@ -8,7 +8,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import {Stack} from '../../primitives'
+import { Stack } from '../../primitives/stack/stack'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
 import {TreeContextValue, TreeState} from './types'
diff --git a/src/core/components/tree/treeGroup.tsx b/src/core/components/tree/treeGroup.tsx
index 2a71170b8..f29a984a5 100644
--- a/src/core/components/tree/treeGroup.tsx
+++ b/src/core/components/tree/treeGroup.tsx
@@ -1,5 +1,5 @@
 import {memo} from 'react'
-import {Stack} from '../../primitives'
+import { Stack } from '../../primitives/stack/stack'
 import {useTree} from './useTree'
 
 export interface TreeGroupProps {
diff --git a/src/core/components/tree/treeItem.tsx b/src/core/components/tree/treeItem.tsx
index 2744d214e..8a97f25a8 100644
--- a/src/core/components/tree/treeItem.tsx
+++ b/src/core/components/tree/treeItem.tsx
@@ -2,7 +2,9 @@ import {ToggleArrowRightIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
-import {Box, BoxProps, Flex, Text} from '../../primitives'
+import { Box, BoxProps } from '../../primitives/box/box'
+import { Flex } from '../../primitives/flex/flex'
+import { Text } from '../../primitives/text/text'
 import {
   treeItemRootStyle,
   treeItemRootColorStyle,
diff --git a/src/core/hooks/useArrayProp.ts b/src/core/hooks/useArrayProp.ts
index fe6855d1e..dd0aabd5d 100644
--- a/src/core/hooks/useArrayProp.ts
+++ b/src/core/hooks/useArrayProp.ts
@@ -1,5 +1,5 @@
 import {useState} from 'react'
-import {_getArrayProp} from '../styles'
+import { _getArrayProp } from '../styles/helpers'
 
 /** @beta */
 export type ArrayPropPrimitive = string | number | boolean | undefined | null
diff --git a/src/core/hooks/useElementRect/__workshop__/example.tsx b/src/core/hooks/useElementRect/__workshop__/example.tsx
index 30f434784..f24d624b0 100644
--- a/src/core/hooks/useElementRect/__workshop__/example.tsx
+++ b/src/core/hooks/useElementRect/__workshop__/example.tsx
@@ -1,6 +1,6 @@
 import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
 import {useState} from 'react'
-import {Grid} from '../../../primitives'
+import { Grid } from '../../../primitives/grid/grid'
 
 export default function ExampleStory() {
   const [element, setElement] = useState<HTMLElement | null>(null)
diff --git a/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx b/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx
index ae1b17872..0fc0192af 100644
--- a/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx
+++ b/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx
@@ -2,7 +2,7 @@
 
 import {buildTheme} from '@sanity/ui/theme'
 import {renderToString, renderToStaticMarkup} from 'react-dom/server'
-import {ThemeProvider} from '../../theme'
+import { ThemeProvider } from '../../theme/themeProvider'
 import {useMediaIndex} from './useMediaIndex'
 
 const theme = buildTheme()
diff --git a/src/core/hooks/useMediaIndex/useMediaIndex.ts b/src/core/hooks/useMediaIndex/useMediaIndex.ts
index b2bfc94f7..9d8d1bd62 100644
--- a/src/core/hooks/useMediaIndex/useMediaIndex.ts
+++ b/src/core/hooks/useMediaIndex/useMediaIndex.ts
@@ -1,5 +1,5 @@
 import {useMemo, useSyncExternalStore} from 'react'
-import {useTheme_v2} from '../../theme'
+import { useTheme_v2 } from '../../theme/useTheme'
 
 /**
  * @internal
diff --git a/src/core/primitives/_selectable/selectable.tsx b/src/core/primitives/_selectable/selectable.tsx
index 99ea42e5b..8694c0fb2 100644
--- a/src/core/primitives/_selectable/selectable.tsx
+++ b/src/core/primitives/_selectable/selectable.tsx
@@ -1,6 +1,7 @@
 import {styled} from 'styled-components'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
-import {Box} from '../box'
+import { responsiveRadiusStyle } from '../../styles/radius/radiusStyle'
+import { ResponsiveRadiusStyleProps } from '../../styles/radius/types'
+import { Box } from '../box/box'
 import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from './style'
 
 /**
diff --git a/src/core/primitives/_selectable/style.ts b/src/core/primitives/_selectable/style.ts
index 5e5b3b2e9..5b126539a 100644
--- a/src/core/primitives/_selectable/style.ts
+++ b/src/core/primitives/_selectable/style.ts
@@ -1,8 +1,8 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {SelectableTone} from '../../types'
+import { ThemeProps } from '../../styles/types'
+import { _cardColorStyle } from '../../styles/card/_cardColorStyle'
+import { SelectableTone } from '../../types/selectable'
 
 /**
  * @internal
diff --git a/src/core/primitives/avatar/__workshop__/withinButton.tsx b/src/core/primitives/avatar/__workshop__/withinButton.tsx
index 142d33a30..5661ca7ce 100644
--- a/src/core/primitives/avatar/__workshop__/withinButton.tsx
+++ b/src/core/primitives/avatar/__workshop__/withinButton.tsx
@@ -1,10 +1,10 @@
 import {useBoolean} from '@sanity/ui-workshop'
-import {Box} from '../../box'
-import {Button} from '../../button'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
+import { Box } from '../../box/box'
+import { Button } from '../../button/button'
+import { Container } from '../../container/container'
+import { Flex } from '../../flex/flex'
+import { Stack } from '../../stack/stack'
+import { Text } from '../../text/text'
 import {Avatar} from '../avatar'
 import {AvatarStack} from '../avatarStack'
 
diff --git a/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx b/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx
index 54222a373..993bf06d9 100644
--- a/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx
+++ b/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx
@@ -1,11 +1,12 @@
 import {useBoolean} from '@sanity/ui-workshop'
-import {Menu, MenuItem} from '../../../components'
-import {Layer} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Text} from '../../text'
+import { Menu } from '../../../components/menu/menu'
+import { MenuItem } from '../../../components/menu/menuItem'
+import { Layer } from '../../../utils/layer/layer'
+import { Box } from '../../box/box'
+import { Card } from '../../card/card'
+import { Container } from '../../container/container'
+import { Flex } from '../../flex/flex'
+import { Text } from '../../text/text'
 import {Avatar} from '../avatar'
 import {AvatarStack} from '../avatarStack'
 
diff --git a/src/core/primitives/avatar/avatar.tsx b/src/core/primitives/avatar/avatar.tsx
index ad212a877..46c59b942 100644
--- a/src/core/primitives/avatar/avatar.tsx
+++ b/src/core/primitives/avatar/avatar.tsx
@@ -2,10 +2,10 @@ import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {useTheme_v2} from '../../theme'
-import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
-import {Label} from '../label'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { useTheme_v2 } from '../../theme/useTheme'
+import { AvatarPosition, AvatarSize, AvatarStatus } from '../../types/avatar'
+import { Label } from '../label/label'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
 
 /**
diff --git a/src/core/primitives/avatar/avatarCounter.tsx b/src/core/primitives/avatar/avatarCounter.tsx
index 9245a4ab8..5e0e01af5 100644
--- a/src/core/primitives/avatar/avatarCounter.tsx
+++ b/src/core/primitives/avatar/avatarCounter.tsx
@@ -2,10 +2,11 @@ import {getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef, useMemo} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {rem, _responsive, ThemeProps} from '../../styles'
-import {AvatarSize} from '../../types'
-import {Label} from '../label'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { rem, _responsive } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
+import { AvatarSize } from '../../types/avatar'
+import { Label } from '../label/label'
 
 function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
   const {avatar, media} = getTheme_v2(props.theme)
diff --git a/src/core/primitives/avatar/avatarStack.tsx b/src/core/primitives/avatar/avatarStack.tsx
index ce7091777..8f01c01b8 100644
--- a/src/core/primitives/avatar/avatarStack.tsx
+++ b/src/core/primitives/avatar/avatarStack.tsx
@@ -2,9 +2,10 @@ import {getTheme_v2} from '@sanity/ui/theme'
 import {Children, cloneElement, forwardRef, isValidElement} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {rem, _responsive, ThemeProps} from '../../styles'
-import {AvatarSize} from '../../types'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { rem, _responsive } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
+import { AvatarSize } from '../../types/avatar'
 import {AvatarCounter} from './avatarCounter'
 
 const BASE_STYLES = css`
diff --git a/src/core/primitives/avatar/styles.ts b/src/core/primitives/avatar/styles.ts
index d8c1b7ae7..11a8f2097 100644
--- a/src/core/primitives/avatar/styles.ts
+++ b/src/core/primitives/avatar/styles.ts
@@ -1,5 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import { rem, _responsive } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
 import {focusRingStyle} from '../../styles/internal'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
diff --git a/src/core/primitives/avatar/types.ts b/src/core/primitives/avatar/types.ts
index 3a716a986..b329d02cb 100644
--- a/src/core/primitives/avatar/types.ts
+++ b/src/core/primitives/avatar/types.ts
@@ -1,5 +1,5 @@
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {AvatarSize} from '../../types'
+import { AvatarSize } from '../../types/avatar'
 
 /**
  * @internal
diff --git a/src/core/primitives/badge/badge.test.tsx b/src/core/primitives/badge/badge.test.tsx
index 2cd9220b8..d67b2c9aa 100644
--- a/src/core/primitives/badge/badge.test.tsx
+++ b/src/core/primitives/badge/badge.test.tsx
@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 
 import {axe} from 'jest-axe'
-import {render} from '../../../../test'
+import { render } from '../../../../test/utils'
 import {Badge} from './badge'
 
 describe('atoms/badge', () => {
diff --git a/src/core/primitives/badge/badge.tsx b/src/core/primitives/badge/badge.tsx
index 75876a9c1..0ed9b2238 100644
--- a/src/core/primitives/badge/badge.tsx
+++ b/src/core/primitives/badge/badge.tsx
@@ -1,10 +1,10 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {BadgeMode, BadgeTone} from '../../types'
-import {Box, BoxProps} from '../box'
-import {Text} from '../text'
+import { BadgeMode, BadgeTone } from '../../types/badge'
+import { Box, BoxProps } from '../box/box'
+import { Text } from '../text/text'
 import {ResponsiveRadiusProps} from '../types'
 import {badgeStyle} from './styles'
 import {BadgeStyleProps} from './types'
diff --git a/src/core/primitives/badge/types.ts b/src/core/primitives/badge/types.ts
index 75ed1cf78..6cd7d316b 100644
--- a/src/core/primitives/badge/types.ts
+++ b/src/core/primitives/badge/types.ts
@@ -1,4 +1,4 @@
-import {BadgeTone} from '../../types'
+import { BadgeTone } from '../../types/badge'
 
 /**
  * @internal
diff --git a/src/core/primitives/box/box.tsx b/src/core/primitives/box/box.tsx
index debd67f75..1920516d4 100644
--- a/src/core/primitives/box/box.tsx
+++ b/src/core/primitives/box/box.tsx
@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {
   boxStyle,
   flexItemStyle,
diff --git a/src/core/primitives/button/button.test.tsx b/src/core/primitives/button/button.test.tsx
index b0c58b701..08d672305 100644
--- a/src/core/primitives/button/button.test.tsx
+++ b/src/core/primitives/button/button.test.tsx
@@ -3,7 +3,7 @@
 import {AddIcon} from '@sanity/icons'
 import {screen} from '@testing-library/react'
 import {axe} from 'jest-axe'
-import {render} from '../../../../test'
+import { render } from '../../../../test/utils'
 import {Button, ButtonProps} from './button'
 
 describe('atoms/button', () => {
diff --git a/src/core/primitives/button/button.tsx b/src/core/primitives/button/button.tsx
index d5fbba506..5edfe9aa4 100644
--- a/src/core/primitives/button/button.tsx
+++ b/src/core/primitives/button/button.tsx
@@ -2,15 +2,16 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {ThemeProps} from '../../styles'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { ThemeProps } from '../../styles/types'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {useTheme_v2} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
-import {Box} from '../box'
-import {Flex} from '../flex'
-import {Spinner} from '../spinner'
-import {Text} from '../text'
+import { useTheme_v2 } from '../../theme/useTheme'
+import { ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth } from '../../types/button'
+import { FlexJustify } from '../../types/flex'
+import { Box } from '../box/box'
+import { Flex } from '../flex/flex'
+import { Spinner } from '../spinner/spinner'
+import { Text } from '../text/text'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
 import {buttonBaseStyles, buttonColorStyles} from './styles'
 
diff --git a/src/core/primitives/button/styles.ts b/src/core/primitives/button/styles.ts
index 89760eeb2..6489003d5 100644
--- a/src/core/primitives/button/styles.ts
+++ b/src/core/primitives/button/styles.ts
@@ -1,9 +1,9 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
+import { ThemeProps } from '../../styles/types'
+import { _cardColorStyle } from '../../styles/card/_cardColorStyle'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
+import { ButtonMode, ButtonTone, ButtonWidth } from '../../types/button'
 
 /**
  * @internal
diff --git a/src/core/primitives/card/__workshop__/listNavigation.tsx b/src/core/primitives/card/__workshop__/listNavigation.tsx
index b3f0bfa6b..8b91b18bd 100644
--- a/src/core/primitives/card/__workshop__/listNavigation.tsx
+++ b/src/core/primitives/card/__workshop__/listNavigation.tsx
@@ -1,5 +1,5 @@
 import {Box, Card, Flex, Skeleton, Text} from '@sanity/ui'
-import {Stack} from '../../stack'
+import { Stack } from '../../stack/stack'
 
 export default function ListNavigationStory() {
   return (
diff --git a/src/core/primitives/card/card.tsx b/src/core/primitives/card/card.tsx
index 348380129..ae5e3cdb1 100644
--- a/src/core/primitives/card/card.tsx
+++ b/src/core/primitives/card/card.tsx
@@ -2,7 +2,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,
@@ -11,9 +11,10 @@ import {
   responsiveShadowStyle,
   ResponsiveShadowStyleProps,
 } from '../../styles/internal'
-import {ThemeColorProvider, useRootTheme} from '../../theme'
-import {CardTone} from '../../types'
-import {Box, BoxProps} from '../box'
+import { ThemeColorProvider } from '../../theme/themeColorProvider'
+import { useRootTheme } from '../../theme/useRootTheme'
+import { CardTone } from '../../types/card'
+import { Box, BoxProps } from '../box/box'
 import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {cardStyle} from './styles'
 import {CardStyleProps} from './types'
diff --git a/src/core/primitives/card/styles.ts b/src/core/primitives/card/styles.ts
index 4f114c454..8a4e39297 100644
--- a/src/core/primitives/card/styles.ts
+++ b/src/core/primitives/card/styles.ts
@@ -1,7 +1,7 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
+import { ThemeProps } from '../../styles/types'
+import { _cardColorStyle } from '../../styles/card/_cardColorStyle'
 import {focusRingStyle} from '../../styles/focusRing'
 import {CardStyleProps} from './types'
 
diff --git a/src/core/primitives/checkbox/checkbox.tsx b/src/core/primitives/checkbox/checkbox.tsx
index 804d74fa7..df461951d 100644
--- a/src/core/primitives/checkbox/checkbox.tsx
+++ b/src/core/primitives/checkbox/checkbox.tsx
@@ -1,7 +1,7 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
 import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity} from '../../hooks'
+import { useCustomValidity } from '../../hooks/useCustomValidity'
 import {checkboxBaseStyles, inputElementStyles} from './styles'
 
 /**
diff --git a/src/core/primitives/checkbox/styles.ts b/src/core/primitives/checkbox/styles.ts
index f54a01934..40d954ab2 100644
--- a/src/core/primitives/checkbox/styles.ts
+++ b/src/core/primitives/checkbox/styles.ts
@@ -1,6 +1,7 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
+import { rem } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 
 export function checkboxBaseStyles(): ReturnType<typeof css> {
diff --git a/src/core/primitives/code/code.tsx b/src/core/primitives/code/code.tsx
index 6c1e892d9..4a038b38a 100644
--- a/src/core/primitives/code/code.tsx
+++ b/src/core/primitives/code/code.tsx
@@ -1,6 +1,6 @@
 import {forwardRef, Suspense, lazy} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 
diff --git a/src/core/primitives/container/container.tsx b/src/core/primitives/container/container.tsx
index 702057b47..33940233f 100644
--- a/src/core/primitives/container/container.tsx
+++ b/src/core/primitives/container/container.tsx
@@ -1,7 +1,7 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {Box, BoxProps} from '../box'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Box, BoxProps } from '../box/box'
 import {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
 import {ResponsiveWidthStyleProps} from './types'
diff --git a/src/core/primitives/container/styles.ts b/src/core/primitives/container/styles.ts
index b7cfd6f26..c011c689b 100644
--- a/src/core/primitives/container/styles.ts
+++ b/src/core/primitives/container/styles.ts
@@ -1,5 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import { rem, _responsive } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
 import {ResponsiveWidthStyleProps} from './types'
 
 const BASE_STYLE: CSSObject = {
diff --git a/src/core/primitives/flex/flex.tsx b/src/core/primitives/flex/flex.tsx
index df2771cbb..1d9b2310b 100644
--- a/src/core/primitives/flex/flex.tsx
+++ b/src/core/primitives/flex/flex.tsx
@@ -1,13 +1,13 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {
   flexItemStyle,
   FlexItemStyleProps,
   responsiveFlexStyle,
   ResponsiveFlexStyleProps,
 } from '../../styles/internal'
-import {Box, BoxProps} from '../box'
+import { Box, BoxProps } from '../box/box'
 import {ResponsiveFlexProps, ResponsiveFlexItemProps} from '../types'
 
 /**
diff --git a/src/core/primitives/grid/grid.tsx b/src/core/primitives/grid/grid.tsx
index 107a8d5be..de67a1410 100644
--- a/src/core/primitives/grid/grid.tsx
+++ b/src/core/primitives/grid/grid.tsx
@@ -1,8 +1,8 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
-import {Box, BoxProps} from '../box'
+import { Box, BoxProps } from '../box/box'
 import {ResponsiveGridProps} from '../types'
 
 /**
diff --git a/src/core/primitives/heading/heading.tsx b/src/core/primitives/heading/heading.tsx
index a9680de12..91111df49 100644
--- a/src/core/primitives/heading/heading.tsx
+++ b/src/core/primitives/heading/heading.tsx
@@ -1,14 +1,14 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,
   responsiveTextAlignStyle,
   ResponsiveTextAlignStyleProps,
 } from '../../styles/internal'
-import {TextAlign} from '../../types'
+import { TextAlign } from '../../types/text'
 import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {headingBaseStyle} from './styles'
 import {HeadingStyleProps} from './types'
diff --git a/src/core/primitives/heading/styles.ts b/src/core/primitives/heading/styles.ts
index 35841a1c9..166100550 100644
--- a/src/core/primitives/heading/styles.ts
+++ b/src/core/primitives/heading/styles.ts
@@ -1,6 +1,6 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
+import { ThemeProps } from '../../styles/types'
 import {HeadingStyleProps} from './types'
 
 export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
diff --git a/src/core/primitives/inline/inline.tsx b/src/core/primitives/inline/inline.tsx
index 90d4e980d..15f656b66 100644
--- a/src/core/primitives/inline/inline.tsx
+++ b/src/core/primitives/inline/inline.tsx
@@ -1,7 +1,7 @@
 import {forwardRef, useMemo, Children} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {Box, BoxProps} from '../box'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Box, BoxProps } from '../box/box'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
diff --git a/src/core/primitives/inline/styles.ts b/src/core/primitives/inline/styles.ts
index 0db17cf36..c5236899d 100644
--- a/src/core/primitives/inline/styles.ts
+++ b/src/core/primitives/inline/styles.ts
@@ -1,5 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import { rem, _responsive } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {
diff --git a/src/core/primitives/kbd/kbd.tsx b/src/core/primitives/kbd/kbd.tsx
index 8fd8c5f59..5a3222e57 100644
--- a/src/core/primitives/kbd/kbd.tsx
+++ b/src/core/primitives/kbd/kbd.tsx
@@ -1,10 +1,10 @@
 import {forwardRef} from 'react'
 import {styled, css} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {Radius} from '../../types'
-import {Box} from '../box'
-import {Text} from '../text'
+import { Radius } from '../../types/radius'
+import { Box } from '../box/box'
+import { Text } from '../text/text'
 
 /**
  * @public
diff --git a/src/core/primitives/label/label.tsx b/src/core/primitives/label/label.tsx
index 27f64fee9..334b7a876 100644
--- a/src/core/primitives/label/label.tsx
+++ b/src/core/primitives/label/label.tsx
@@ -1,9 +1,9 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
-import {TextAlign} from '../../types'
+import { TextAlign } from '../../types/text'
 import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {labelBaseStyle} from './styles'
 
diff --git a/src/core/primitives/label/styles.ts b/src/core/primitives/label/styles.ts
index 472e58307..1105c7432 100644
--- a/src/core/primitives/label/styles.ts
+++ b/src/core/primitives/label/styles.ts
@@ -1,6 +1,6 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
+import { ThemeProps } from '../../styles/types'
 
 export function labelBaseStyle(
   props: {$accent?: boolean; $muted: boolean} & ThemeProps,
diff --git a/src/core/primitives/popover/__workshop__/SidePanelStory.tsx b/src/core/primitives/popover/__workshop__/SidePanelStory.tsx
index e73f5070a..8f97dfa7b 100644
--- a/src/core/primitives/popover/__workshop__/SidePanelStory.tsx
+++ b/src/core/primitives/popover/__workshop__/SidePanelStory.tsx
@@ -1,11 +1,11 @@
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
-import {BoundaryElementProvider} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
+import { BoundaryElementProvider } from '../../../utils/boundaryElement/boundaryElementProvider'
+import { Box } from '../../box/box'
+import { Card } from '../../card/card'
+import { Flex } from '../../flex/flex'
+import { Stack } from '../../stack/stack'
+import { Text } from '../../text/text'
 import {Popover, PopoverProps, PopoverUpdateCallback} from '../popover'
 
 const SIDE_PANEL_WIDTH = {
diff --git a/src/core/primitives/popover/__workshop__/TestStory.tsx b/src/core/primitives/popover/__workshop__/TestStory.tsx
index cb0c15734..9a0507981 100644
--- a/src/core/primitives/popover/__workshop__/TestStory.tsx
+++ b/src/core/primitives/popover/__workshop__/TestStory.tsx
@@ -5,10 +5,11 @@ import {
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
 } from '../../../__workshop__/constants'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Button} from '../../button'
-import {Card} from '../../card'
-import {Text} from '../../text'
+import { BoundaryElementProvider } from '../../../utils/boundaryElement/boundaryElementProvider'
+import { PortalProvider } from '../../../utils/portal/portalProvider'
+import { Button } from '../../button/button'
+import { Card } from '../../card/card'
+import { Text } from '../../text/text'
 import {Popover} from '../popover'
 import {PopoverUpdateCallback} from '../types'
 
diff --git a/src/core/primitives/popover/constants.ts b/src/core/primitives/popover/constants.ts
index f4a55624f..74dc44380 100644
--- a/src/core/primitives/popover/constants.ts
+++ b/src/core/primitives/popover/constants.ts
@@ -1,4 +1,5 @@
-import {Placement, PopoverMargins} from '../../types'
+import { Placement } from '../../types/placement'
+import { PopoverMargins } from '../../types/popover'
 
 export const DEFAULT_POPOVER_DISTANCE = 4
 export const DEFAULT_POPOVER_PADDING = 4
diff --git a/src/core/primitives/popover/floating-ui/size.ts b/src/core/primitives/popover/floating-ui/size.ts
index 96e0e9534..363ad9c28 100644
--- a/src/core/primitives/popover/floating-ui/size.ts
+++ b/src/core/primitives/popover/floating-ui/size.ts
@@ -1,5 +1,5 @@
 import {Elements, Middleware, detectOverflow} from '@floating-ui/react-dom'
-import {PopoverMargins} from '../../../types'
+import { PopoverMargins } from '../../../types/popover'
 
 export interface SizeMiddlewareApplyOptions {
   availableWidth: number
diff --git a/src/core/primitives/popover/popover.tsx b/src/core/primitives/popover/popover.tsx
index 733e33895..6ed1defd7 100644
--- a/src/core/primitives/popover/popover.tsx
+++ b/src/core/primitives/popover/popover.tsx
@@ -23,11 +23,21 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { useElementSize } from '../../hooks/useElementSize'
+import { useMediaIndex } from '../../hooks/useMediaIndex/useMediaIndex'
+import { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
-import {useTheme_v2} from '../../theme'
-import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
-import {LayerProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
+import { useTheme_v2 } from '../../theme/useTheme'
+import { BoxOverflow } from '../../types/box'
+import { CardTone } from '../../types/card'
+import { Placement } from '../../types/placement'
+import { PopoverMargins } from '../../types/popover'
+import { LayerProps } from '../../utils/layer/layer'
+import { LayerProvider } from '../../utils/layer/layerProvider'
+import { Portal } from '../../utils/portal/portal'
+import { useBoundaryElement } from '../../utils/boundaryElement/useBoundaryElement'
+import { useLayer } from '../../utils/layer/useLayer'
 import {getElementRef} from '../../utils/getElementRef'
 import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {
diff --git a/src/core/primitives/popover/popoverCard.tsx b/src/core/primitives/popover/popoverCard.tsx
index f116474d9..1501a7d23 100644
--- a/src/core/primitives/popover/popoverCard.tsx
+++ b/src/core/primitives/popover/popoverCard.tsx
@@ -4,10 +4,15 @@ import {type MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
-import {Arrow, useLayer} from '../../utils'
-import {Card, CardProps} from '../card'
-import {Flex} from '../flex'
+import { BoxOverflow } from '../../types/box'
+import { CardTone } from '../../types/card'
+import { Placement } from '../../types/placement'
+import { PopoverMargins } from '../../types/popover'
+import { Radius } from '../../types/radius'
+import { Arrow } from '../../utils/arrow/arrow'
+import { useLayer } from '../../utils/layer/useLayer'
+import { Card, CardProps } from '../card/card'
+import { Flex } from '../flex/flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
   DEFAULT_POPOVER_ARROW_RADIUS,
diff --git a/src/core/primitives/radio/radio.tsx b/src/core/primitives/radio/radio.tsx
index 9fae02cf4..895f4ed8e 100644
--- a/src/core/primitives/radio/radio.tsx
+++ b/src/core/primitives/radio/radio.tsx
@@ -1,6 +1,6 @@
 import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity} from '../../hooks'
+import { useCustomValidity } from '../../hooks/useCustomValidity'
 import {radioBaseStyle, inputElementStyle} from './styles'
 
 /**
diff --git a/src/core/primitives/radio/styles.ts b/src/core/primitives/radio/styles.ts
index 72afd1eba..7c821b3b9 100644
--- a/src/core/primitives/radio/styles.ts
+++ b/src/core/primitives/radio/styles.ts
@@ -1,6 +1,7 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
+import { rem } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 
 export function radioBaseStyle(): ReturnType<typeof css> {
diff --git a/src/core/primitives/select/select.tsx b/src/core/primitives/select/select.tsx
index 7836f061b..034e474be 100644
--- a/src/core/primitives/select/select.tsx
+++ b/src/core/primitives/select/select.tsx
@@ -1,10 +1,11 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity, useArrayProp} from '../../hooks'
-import {Radius} from '../../types'
-import {Box} from '../box'
-import {Text} from '../text'
+import { useCustomValidity } from '../../hooks/useCustomValidity'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Radius } from '../../types/radius'
+import { Box } from '../box/box'
+import { Text } from '../text/text'
 import {selectStyle} from './styles'
 
 /**
diff --git a/src/core/primitives/select/styles.ts b/src/core/primitives/select/styles.ts
index 053b82b53..b1620f2ea 100644
--- a/src/core/primitives/select/styles.ts
+++ b/src/core/primitives/select/styles.ts
@@ -1,7 +1,8 @@
 import {ThemeFontSize, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import { rem, _responsive } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
 import {
   focusRingBorderStyle,
   focusRingStyle,
diff --git a/src/core/primitives/spinner/spinner.tsx b/src/core/primitives/spinner/spinner.tsx
index b40c4229c..073cca1a2 100644
--- a/src/core/primitives/spinner/spinner.tsx
+++ b/src/core/primitives/spinner/spinner.tsx
@@ -1,7 +1,7 @@
 import {SpinnerIcon} from '@sanity/icons'
 import {forwardRef} from 'react'
 import {styled, keyframes} from 'styled-components'
-import {Text} from '../text'
+import { Text } from '../text/text'
 
 /**
  * @public
diff --git a/src/core/primitives/stack/stack.tsx b/src/core/primitives/stack/stack.tsx
index d34cd5b81..4fbcdcd6e 100644
--- a/src/core/primitives/stack/stack.tsx
+++ b/src/core/primitives/stack/stack.tsx
@@ -1,7 +1,7 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {Box, BoxProps} from '../box'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Box, BoxProps } from '../box/box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 
 /**
diff --git a/src/core/primitives/stack/styles.ts b/src/core/primitives/stack/styles.ts
index e7c276f64..2c8af7697 100644
--- a/src/core/primitives/stack/styles.ts
+++ b/src/core/primitives/stack/styles.ts
@@ -1,5 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import { rem, _responsive } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
 
 export interface ResponsiveStackSpaceStyleProps {
   $space: number[]
diff --git a/src/core/primitives/switch/styles.ts b/src/core/primitives/switch/styles.ts
index e5fa6a5d2..093376047 100644
--- a/src/core/primitives/switch/styles.ts
+++ b/src/core/primitives/switch/styles.ts
@@ -1,6 +1,7 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
+import { rem } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
 import {focusRingStyle} from '../../styles/internal'
 
 /* Root */
diff --git a/src/core/primitives/text/styles.ts b/src/core/primitives/text/styles.ts
index 858732806..2332b7448 100644
--- a/src/core/primitives/text/styles.ts
+++ b/src/core/primitives/text/styles.ts
@@ -1,6 +1,6 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
+import { ThemeProps } from '../../styles/types'
 
 export function textBaseStyle(
   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
diff --git a/src/core/primitives/text/text.tsx b/src/core/primitives/text/text.tsx
index 938d94dcd..bc3105dbe 100644
--- a/src/core/primitives/text/text.tsx
+++ b/src/core/primitives/text/text.tsx
@@ -1,13 +1,13 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,
   responsiveTextFont,
 } from '../../styles/internal'
-import {TextAlign} from '../../types'
+import { TextAlign } from '../../types/text'
 import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {textBaseStyle} from './styles'
 
diff --git a/src/core/primitives/textArea/textArea.tsx b/src/core/primitives/textArea/textArea.tsx
index 15656a733..c56e0b5f3 100644
--- a/src/core/primitives/textArea/textArea.tsx
+++ b/src/core/primitives/textArea/textArea.tsx
@@ -1,7 +1,8 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity, useArrayProp} from '../../hooks'
+import { useCustomValidity } from '../../hooks/useCustomValidity'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -14,7 +15,7 @@ import {
   textInputFontSizeStyle,
   textInputRepresentationStyle,
 } from '../../styles/internal'
-import {useRootTheme} from '../../theme'
+import { useRootTheme } from '../../theme/useRootTheme'
 import {ResponsiveRadiusProps} from '../types'
 
 /**
diff --git a/src/core/primitives/textInput/textInput.tsx b/src/core/primitives/textInput/textInput.tsx
index 7d219d7ce..d5a2f5e8d 100644
--- a/src/core/primitives/textInput/textInput.tsx
+++ b/src/core/primitives/textInput/textInput.tsx
@@ -4,7 +4,8 @@ import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, u
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useCustomValidity} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { useCustomValidity } from '../../hooks/useCustomValidity'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -17,12 +18,12 @@ import {
   TextInputResponsivePaddingStyleProps,
   textInputRootStyle,
 } from '../../styles/internal'
-import {useRootTheme} from '../../theme'
-import {Radius} from '../../types'
-import {Box} from '../box'
-import {Button, ButtonProps} from '../button'
-import {Card} from '../card'
-import {Text} from '../text'
+import { useRootTheme } from '../../theme/useRootTheme'
+import { Radius } from '../../types/radius'
+import { Box } from '../box/box'
+import { Button, ButtonProps } from '../button/button'
+import { Card } from '../card/card'
+import { Text } from '../text/text'
 
 /**
  * @public
diff --git a/src/core/primitives/tooltip/tooltip.test.tsx b/src/core/primitives/tooltip/tooltip.test.tsx
index 9a625de60..b3cff9101 100644
--- a/src/core/primitives/tooltip/tooltip.test.tsx
+++ b/src/core/primitives/tooltip/tooltip.test.tsx
@@ -2,9 +2,11 @@
 import {screen, act, fireEvent} from '@testing-library/react'
 import '../../../../test/mocks/resizeObserver.mock'
 import '../../../../test/mocks/matchMedia.mock'
-import {render} from '../../../../test'
-import {Text, Button} from '../../primitives'
-import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
+import { render } from '../../../../test/utils'
+import { Text } from '../../primitives/text/text'
+import { Button } from '../../primitives/button/button'
+import { Tooltip } from '../tooltip/tooltip'
+import { TooltipDelayGroupProvider } from '../tooltip/tooltipDelayGroup/tooltipDelayGroupProvider'
 
 // Fake timers using Jest
 beforeEach(() => {
diff --git a/src/core/primitives/tooltip/tooltip.tsx b/src/core/primitives/tooltip/tooltip.tsx
index eed0aa20a..60e757a8a 100644
--- a/src/core/primitives/tooltip/tooltip.tsx
+++ b/src/core/primitives/tooltip/tooltip.tsx
@@ -24,12 +24,16 @@ import {
 } from 'react'
 import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
-import {useTheme_v2} from '../../theme'
-import type {Placement} from '../../types'
-import {Layer, type LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import { useTheme_v2 } from '../../theme/useTheme'
+import type { Placement } from '../../types/placement'
+import { Layer, type LayerProps } from '../../utils/layer/layer'
+import { Portal } from '../../utils/portal/portal'
+import { useBoundaryElement } from '../../utils/boundaryElement/useBoundaryElement'
+import { usePortal } from '../../utils/portal/usePortal'
 import {getElementRef} from '../../utils/getElementRef'
 import type {Delay} from '../types'
 import {
@@ -38,7 +42,7 @@ import {
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
 import {TooltipCard} from './tooltipCard'
-import {useTooltipDelayGroup} from './tooltipDelayGroup'
+import { useTooltipDelayGroup } from './tooltipDelayGroup/useTooltipDelayGroup'
 
 /**
  * @public
diff --git a/src/core/primitives/tooltip/tooltipCard.tsx b/src/core/primitives/tooltip/tooltipCard.tsx
index d23b6aa10..609d0c8e1 100644
--- a/src/core/primitives/tooltip/tooltipCard.tsx
+++ b/src/core/primitives/tooltip/tooltipCard.tsx
@@ -3,9 +3,10 @@ import {type MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import {Placement, Radius} from '../../types'
-import {Arrow} from '../../utils'
-import {Card, CardProps} from '../card'
+import { Placement } from '../../types/placement'
+import { Radius } from '../../types/radius'
+import { Arrow } from '../../utils/arrow/arrow'
+import { Card, CardProps } from '../card/card'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,
diff --git a/src/core/primitives/types.ts b/src/core/primitives/types.ts
index 616aa5a81..d3bd9c3fc 100644
--- a/src/core/primitives/types.ts
+++ b/src/core/primitives/types.ts
@@ -1,24 +1,8 @@
-import {
-  BoxDisplay,
-  BoxHeight,
-  BoxOverflow,
-  BoxSizing,
-  FlexAlign,
-  FlexDirection,
-  FlexJustify,
-  FlexValue,
-  FlexWrap,
-  GridAutoCols,
-  GridAutoFlow,
-  GridAutoRows,
-  GridItemColumn,
-  GridItemColumnEnd,
-  GridItemColumnStart,
-  GridItemRow,
-  GridItemRowEnd,
-  GridItemRowStart,
-  Radius,
-} from '../types'
+import { BoxDisplay, BoxHeight, BoxOverflow, BoxSizing } from '../types/box'
+import { FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap } from '../types/flex'
+import { GridAutoCols, GridAutoFlow, GridAutoRows } from '../types/grid'
+import { GridItemColumn, GridItemColumnEnd, GridItemColumnStart, GridItemRow, GridItemRowEnd, GridItemRowStart } from '../types/gridItem'
+import { Radius } from '../types/radius'
 
 /**
  * @public
diff --git a/src/core/styles/box/types.ts b/src/core/styles/box/types.ts
index e91c45b85..8db39cf2f 100644
--- a/src/core/styles/box/types.ts
+++ b/src/core/styles/box/types.ts
@@ -1,4 +1,4 @@
-import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../types'
+import { BoxDisplay, BoxHeight, BoxOverflow, BoxSizing } from '../../types/box'
 
 /**
  * @internal
diff --git a/src/core/styles/flex/types.ts b/src/core/styles/flex/types.ts
index 062a422d1..8280558f8 100644
--- a/src/core/styles/flex/types.ts
+++ b/src/core/styles/flex/types.ts
@@ -1,4 +1,4 @@
-import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '../../types'
+import { FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap } from '../../types/flex'
 
 /**
  * @internal
diff --git a/src/core/styles/font/types.ts b/src/core/styles/font/types.ts
index 503975063..6582d019e 100644
--- a/src/core/styles/font/types.ts
+++ b/src/core/styles/font/types.ts
@@ -1,5 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {TextAlign} from '../../types'
+import { TextAlign } from '../../types/text'
 
 /**
  * @internal
diff --git a/src/core/styles/grid/types.ts b/src/core/styles/grid/types.ts
index c1d99df10..be731abcb 100644
--- a/src/core/styles/grid/types.ts
+++ b/src/core/styles/grid/types.ts
@@ -1,14 +1,5 @@
-import {
-  GridAutoCols,
-  GridAutoFlow,
-  GridAutoRows,
-  GridItemColumn,
-  GridItemColumnEnd,
-  GridItemColumnStart,
-  GridItemRow,
-  GridItemRowEnd,
-  GridItemRowStart,
-} from '../../types'
+import { GridAutoCols, GridAutoFlow, GridAutoRows } from '../../types/grid'
+import { GridItemColumn, GridItemColumnEnd, GridItemColumnStart, GridItemRow, GridItemRowEnd, GridItemRowStart } from '../../types/gridItem'
 
 /**
  * @internal
diff --git a/src/core/styles/input/textInputStyle.ts b/src/core/styles/input/textInputStyle.ts
index 07acfc186..6406b1a02 100644
--- a/src/core/styles/input/textInputStyle.ts
+++ b/src/core/styles/input/textInputStyle.ts
@@ -1,7 +1,7 @@
 import {ThemeColorSchemeKey, ThemeFontWeightKey, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {CardTone} from '../../types'
+import { CardTone } from '../../types/card'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
diff --git a/src/core/styles/radius/types.ts b/src/core/styles/radius/types.ts
index 72539020b..89ac8ea1a 100644
--- a/src/core/styles/radius/types.ts
+++ b/src/core/styles/radius/types.ts
@@ -1,4 +1,4 @@
-import {Radius} from '../../types'
+import { Radius } from '../../types/radius'
 
 /**
  * @internal
diff --git a/src/core/theme/__workshop__/build/Root.tsx b/src/core/theme/__workshop__/build/Root.tsx
index 49820adc5..0844f0a37 100644
--- a/src/core/theme/__workshop__/build/Root.tsx
+++ b/src/core/theme/__workshop__/build/Root.tsx
@@ -1,5 +1,5 @@
 import {css, styled} from 'styled-components'
-import {getTheme_v2} from '../../../../theme'
+import { getTheme_v2 } from '../../../../theme/versioning/getTheme_v2'
 
 export const Root = styled.div((props) => {
   const {button, card, input} = getTheme_v2(props.theme)
diff --git a/src/core/theme/__workshop__/build/story.tsx b/src/core/theme/__workshop__/build/story.tsx
index 22db05bf2..1705c04b9 100644
--- a/src/core/theme/__workshop__/build/story.tsx
+++ b/src/core/theme/__workshop__/build/story.tsx
@@ -13,7 +13,7 @@ import {
   ThemeColorInputModeKey,
 } from '@sanity/ui/theme'
 import {buildTheme} from '@sanity/ui/theme'
-import {rem} from '../../../styles'
+import { rem } from '../../../styles/helpers'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
 import {Root} from './Root'
diff --git a/src/core/theme/__workshop__/debug/story.tsx b/src/core/theme/__workshop__/debug/story.tsx
index fdfb540bf..e7f317698 100644
--- a/src/core/theme/__workshop__/debug/story.tsx
+++ b/src/core/theme/__workshop__/debug/story.tsx
@@ -11,7 +11,12 @@ import {
 } from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {CSSProperties} from 'react'
-import {Badge, Box, Flex, KBD, Stack, Text} from '../../../primitives'
+import { Badge } from '../../../primitives/badge/badge'
+import { Box } from '../../../primitives/box/box'
+import { Flex } from '../../../primitives/flex/flex'
+import { KBD } from '../../../primitives/kbd/kbd'
+import { Stack } from '../../../primitives/stack/stack'
+import { Text } from '../../../primitives/text/text'
 import {useRootTheme} from '../../useRootTheme'
 
 interface Features {
diff --git a/src/core/theme/theme.test.tsx b/src/core/theme/theme.test.tsx
index 3a045348e..fec1e20e2 100644
--- a/src/core/theme/theme.test.tsx
+++ b/src/core/theme/theme.test.tsx
@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 
 import {buildTheme} from '@sanity/ui/theme'
-import {render} from '../../../test'
+import { render } from '../../../test/utils'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 import {useRootTheme} from './useRootTheme'
diff --git a/src/core/utils/arrow/arrow.tsx b/src/core/utils/arrow/arrow.tsx
index d905f33cd..f7681d226 100644
--- a/src/core/utils/arrow/arrow.tsx
+++ b/src/core/utils/arrow/arrow.tsx
@@ -1,6 +1,6 @@
 import {ForwardedRef, HTMLProps, forwardRef} from 'react'
 import {styled, css} from 'styled-components'
-import {useTheme_v2} from '../../theme'
+import { useTheme_v2 } from '../../theme/useTheme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
 
 const StyledArrow = styled.div<{$w: number}>(
diff --git a/src/core/utils/boundaryElement/boundaryElement.test.tsx b/src/core/utils/boundaryElement/boundaryElement.test.tsx
index 1b33e7b33..162835b3a 100644
--- a/src/core/utils/boundaryElement/boundaryElement.test.tsx
+++ b/src/core/utils/boundaryElement/boundaryElement.test.tsx
@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import {render} from '../../../../test'
+import { render } from '../../../../test/utils'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
 import {useBoundaryElement} from './useBoundaryElement'
diff --git a/src/core/utils/elementQuery/elementQuery.tsx b/src/core/utils/elementQuery/elementQuery.tsx
index c7b340a2a..992ef8fa4 100644
--- a/src/core/utils/elementQuery/elementQuery.tsx
+++ b/src/core/utils/elementQuery/elementQuery.tsx
@@ -1,6 +1,6 @@
 import {forwardRef, useImperativeHandle, useMemo, useState} from 'react'
-import {useElementSize} from '../../hooks'
-import {useTheme_v2} from '../../theme'
+import { useElementSize } from '../../hooks/useElementSize'
+import { useTheme_v2 } from '../../theme/useTheme'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /**
diff --git a/src/core/utils/errorBoundary.tsx b/src/core/utils/errorBoundary.tsx
index b9b0e54ca..b9c9d8587 100644
--- a/src/core/utils/errorBoundary.tsx
+++ b/src/core/utils/errorBoundary.tsx
@@ -1,5 +1,5 @@
 import {Component, PropsWithChildren} from 'react'
-import {Code} from '../primitives/code'
+import { Code } from '../primitives/code/code'
 
 /**
  * DO NOT USE IN PRODUCTION
@@ -22,18 +22,18 @@ export interface ErrorBoundaryState {
  * @beta
  */
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState = {error: null}
+  override state: ErrorBoundaryState = {error: null}
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     // Update state so the next render will show the fallback UI.
     return {error}
   }
 
-  componentDidCatch(error: Error, info: React.ErrorInfo): void {
+  override componentDidCatch(error: Error, info: React.ErrorInfo): void {
     this.props.onCatch({error, info})
   }
 
-  render(): React.ReactNode {
+  override render(): React.ReactNode {
     const {error} = this.state
 
     if (error) {
diff --git a/src/core/utils/layer/layer.test.tsx b/src/core/utils/layer/layer.test.tsx
index 746a4568a..6459e52bb 100644
--- a/src/core/utils/layer/layer.test.tsx
+++ b/src/core/utils/layer/layer.test.tsx
@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import {render} from '../../../../test'
+import { render } from '../../../../test/utils'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
 import {useLayer} from './useLayer'
diff --git a/src/core/utils/layer/layer.tsx b/src/core/utils/layer/layer.tsx
index c7e5fb1b8..fc665be62 100644
--- a/src/core/utils/layer/layer.tsx
+++ b/src/core/utils/layer/layer.tsx
@@ -1,7 +1,7 @@
 import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
+import { containsOrEqualsElement, isHTMLElement } from '../../helpers/element'
 import {LayerProvider} from './layerProvider'
 import {useLayer} from './useLayer'
 
diff --git a/src/core/utils/layer/layerProvider.tsx b/src/core/utils/layer/layerProvider.tsx
index 84f3cc22d..f2c186e56 100644
--- a/src/core/utils/layer/layerProvider.tsx
+++ b/src/core/utils/layer/layerProvider.tsx
@@ -1,5 +1,6 @@
 import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex, useArrayProp} from '../../hooks'
+import { useMediaIndex } from '../../hooks/useMediaIndex/useMediaIndex'
+import { useArrayProp } from '../../hooks/useArrayProp'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
diff --git a/src/core/utils/portal/portal.test.tsx b/src/core/utils/portal/portal.test.tsx
index ee2d147b3..9b1b398da 100644
--- a/src/core/utils/portal/portal.test.tsx
+++ b/src/core/utils/portal/portal.test.tsx
@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import {render} from '../../../../test'
+import { render } from '../../../../test/utils'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 import {usePortal} from './usePortal'
diff --git a/src/core/utils/virtualList/virtualList.tsx b/src/core/utils/virtualList/virtualList.tsx
index 553678bb8..365261333 100644
--- a/src/core/utils/virtualList/virtualList.tsx
+++ b/src/core/utils/virtualList/virtualList.tsx
@@ -1,9 +1,9 @@
 import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
-import {_isScrollable} from '../../helpers'
-import {_ResizeObserver} from '../../observers'
-import {StackProps} from '../../primitives'
-import {useTheme_v2} from '../../theme'
+import { _isScrollable } from '../../helpers/scroll'
+import { _ResizeObserver } from '../../observers/resizeObserver'
+import { StackProps } from '../../primitives/stack/stack'
+import { useTheme_v2 } from '../../theme/useTheme'
 
 /**
  * @beta
diff --git a/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts b/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts
index 5fa0e9894..24c992441 100644
--- a/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts
+++ b/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts
@@ -1,10 +1,7 @@
-import {
-  ThemeColorBase,
-  ThemeColorMuted,
-  ThemeColorSelectable,
-  ThemeColorSelectableStates,
-  ThemeColorSolid,
-} from '../../../../system'
+import { ThemeColorBase } from '../../../../system/v0/color/base'
+import { ThemeColorMuted } from '../../../../system/v0/color/muted'
+import { ThemeColorSelectable, ThemeColorSelectableStates } from '../../../../system/v0/color/selectable'
+import { ThemeColorSolid } from '../../../../system/v0/color/solid'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createSelectableTones(
diff --git a/src/theme/build/_deprecated/color/_solid/createSolidTones.ts b/src/theme/build/_deprecated/color/_solid/createSolidTones.ts
index 571f54d52..80d9cb7de 100644
--- a/src/theme/build/_deprecated/color/_solid/createSolidTones.ts
+++ b/src/theme/build/_deprecated/color/_solid/createSolidTones.ts
@@ -1,4 +1,6 @@
-import {ThemeColorBase, ThemeColorSolid, ThemeColorName} from '../../../../system'
+import { ThemeColorBase } from '../../../../system/v0/color/base'
+import { ThemeColorSolid } from '../../../../system/v0/color/solid'
+import { ThemeColorName } from '../../../../system/v0/color/_system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createSolidTones(
diff --git a/src/theme/build/_deprecated/color/button/createButtonModes.ts b/src/theme/build/_deprecated/color/button/createButtonModes.ts
index 6a7105bd8..4208618eb 100644
--- a/src/theme/build/_deprecated/color/button/createButtonModes.ts
+++ b/src/theme/build/_deprecated/color/button/createButtonModes.ts
@@ -1,9 +1,7 @@
-import {
-  ThemeColorBase,
-  ThemeColorButton,
-  ThemeColorMuted,
-  ThemeColorSolid,
-} from '../../../../system'
+import { ThemeColorBase } from '../../../../system/v0/color/base'
+import { ThemeColorButton } from '../../../../system/v0/color/button'
+import { ThemeColorMuted } from '../../../../system/v0/color/muted'
+import { ThemeColorSolid } from '../../../../system/v0/color/solid'
 import {ThemeColorBuilderOpts} from '../factory'
 import {createButtonTones} from './createButtonTones'
 
diff --git a/src/theme/build/_deprecated/color/button/createButtonTones.ts b/src/theme/build/_deprecated/color/button/createButtonTones.ts
index 627754fa0..9e7749476 100644
--- a/src/theme/build/_deprecated/color/button/createButtonTones.ts
+++ b/src/theme/build/_deprecated/color/button/createButtonTones.ts
@@ -1,10 +1,8 @@
-import {
-  ThemeColorBase,
-  ThemeColorButtonModeKey,
-  ThemeColorButtonTones,
-  ThemeColorMuted,
-  ThemeColorSolid,
-} from '../../../../system'
+import { ThemeColorBase } from '../../../../system/v0/color/base'
+import { ThemeColorButtonModeKey } from '../../../../system/color/_system'
+import { ThemeColorButtonTones } from '../../../../system/v0/color/button'
+import { ThemeColorMuted } from '../../../../system/v0/color/muted'
+import { ThemeColorSolid } from '../../../../system/v0/color/solid'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createButtonTones(
diff --git a/src/theme/build/_deprecated/color/card/createCardStates.ts b/src/theme/build/_deprecated/color/card/createCardStates.ts
index c64ce5fd3..116a16675 100644
--- a/src/theme/build/_deprecated/color/card/createCardStates.ts
+++ b/src/theme/build/_deprecated/color/card/createCardStates.ts
@@ -1,10 +1,8 @@
-import {
-  ThemeColorBase,
-  ThemeColorCard,
-  ThemeColorMuted,
-  ThemeColorSolid,
-  ThemeColorName,
-} from '../../../../system'
+import { ThemeColorBase } from '../../../../system/v0/color/base'
+import { ThemeColorCard } from '../../../../system/v0/color/card'
+import { ThemeColorMuted } from '../../../../system/v0/color/muted'
+import { ThemeColorSolid } from '../../../../system/v0/color/solid'
+import { ThemeColorName } from '../../../../system/v0/color/_system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createCardStates(
diff --git a/src/theme/build/_deprecated/color/factory.ts b/src/theme/build/_deprecated/color/factory.ts
index a27acebc6..a15d4f28d 100644
--- a/src/theme/build/_deprecated/color/factory.ts
+++ b/src/theme/build/_deprecated/color/factory.ts
@@ -1,21 +1,14 @@
-import {
-  ThemeColorGenericState,
-  ThemeColorBase,
-  ThemeColorButtonModeKey,
-  ThemeColorButtonStates,
-  ThemeColorInputState,
-  ThemeColorMuted,
-  ThemeColorMutedTone,
-  ThemeColorSolid,
-  ThemeColorSolidTone,
-  ThemeColorSyntax,
-  ThemeColorName,
-  ThemeColorScheme,
-  ThemeColorSchemes,
-  ThemeColor,
-  ThemeColorToneKey,
-  ThemeColorSpotKey,
-} from '../../../system'
+import { ThemeColorGenericState } from '../../../system/v0/color/_generic'
+import { ThemeColorBase } from '../../../system/v0/color/base'
+import { ThemeColorButtonModeKey } from '../../../system/color/_system'
+import { ThemeColorButtonStates } from '../../../system/v0/color/button'
+import { ThemeColorInputState } from '../../../system/v0/color/input'
+import { ThemeColorMuted, ThemeColorMutedTone } from '../../../system/v0/color/muted'
+import { ThemeColorSolid, ThemeColorSolidTone } from '../../../system/v0/color/solid'
+import { ThemeColorSyntax } from '../../../system/color/syntax'
+import { ThemeColorName, ThemeColorToneKey } from '../../../system/v0/color/_system'
+import { ThemeColorScheme, ThemeColorSchemes, ThemeColor } from '../../../system/v0/color/color'
+import { ThemeColorSpotKey } from '../../../system/v0/color/spot'
 import {createSelectableTones} from './_selectable/createSelectableTones'
 import {createSolidTones} from './_solid/createSolidTones'
 import {createButtonModes} from './button/createButtonModes'
diff --git a/src/theme/build/_deprecated/color/input/createInputModes.ts b/src/theme/build/_deprecated/color/input/createInputModes.ts
index 5424f5211..fb73e5dd7 100644
--- a/src/theme/build/_deprecated/color/input/createInputModes.ts
+++ b/src/theme/build/_deprecated/color/input/createInputModes.ts
@@ -1,4 +1,7 @@
-import {ThemeColorBase, ThemeColorInput, ThemeColorMuted, ThemeColorSolid} from '../../../../system'
+import { ThemeColorBase } from '../../../../system/v0/color/base'
+import { ThemeColorInput } from '../../../../system/v0/color/input'
+import { ThemeColorMuted } from '../../../../system/v0/color/muted'
+import { ThemeColorSolid } from '../../../../system/v0/color/solid'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createInputModes(
diff --git a/src/theme/build/_deprecated/color/muted/createMuted.ts b/src/theme/build/_deprecated/color/muted/createMuted.ts
index 295b4610d..f26ccc14d 100644
--- a/src/theme/build/_deprecated/color/muted/createMuted.ts
+++ b/src/theme/build/_deprecated/color/muted/createMuted.ts
@@ -1,4 +1,6 @@
-import {ThemeColorBase, ThemeColorMuted, ThemeColorName} from '../../../../system'
+import { ThemeColorBase } from '../../../../system/v0/color/base'
+import { ThemeColorMuted } from '../../../../system/v0/color/muted'
+import { ThemeColorName } from '../../../../system/v0/color/_system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createMutedTones(
diff --git a/src/theme/build/_deprecated/color/spot/createSpot.ts b/src/theme/build/_deprecated/color/spot/createSpot.ts
index 147702af0..a376ff378 100644
--- a/src/theme/build/_deprecated/color/spot/createSpot.ts
+++ b/src/theme/build/_deprecated/color/spot/createSpot.ts
@@ -1,4 +1,5 @@
-import {ThemeColorBase, ThemeColorSpot} from '../../../../system'
+import { ThemeColorBase } from '../../../../system/v0/color/base'
+import { ThemeColorSpot } from '../../../../system/v0/color/spot'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createSpot(
diff --git a/src/theme/build/buildColorTheme.test.ts b/src/theme/build/buildColorTheme.test.ts
index 77cdf432d..8bef4a9af 100644
--- a/src/theme/build/buildColorTheme.test.ts
+++ b/src/theme/build/buildColorTheme.test.ts
@@ -1,4 +1,4 @@
-import {ThemeColorTokens} from '../config'
+import { ThemeColorTokens } from '../config/tokens/color/types'
 import {buildColorTheme} from './buildColorTheme'
 
 test('buildColorTheme: base', () => {
diff --git a/src/theme/build/buildColorTheme.ts b/src/theme/build/buildColorTheme.ts
index 809815473..79c08fad1 100644
--- a/src/theme/build/buildColorTheme.ts
+++ b/src/theme/build/buildColorTheme.ts
@@ -1,32 +1,17 @@
-import {ThemeColorBadgeTokens, ThemeColorStateTokens, ThemeConfig} from '../config'
-import {
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_STATES,
-  THEME_COLOR_STATE_TONES,
-  ThemeColorAvatarColorKey,
-  ThemeColorCardToneKey,
-  ThemeColorButtonModeKey,
-  ThemeColorStateKey,
-  ThemeColorStateToneKey,
-  ThemeColorAvatar_v2,
-  ThemeColorBadge_v2,
-  ThemeColorSyntax,
-  ThemeColorSchemes_v2,
-  ThemeColorScheme_v2,
-  ThemeColorCard_v2,
-  ThemeColorSchemeKey,
-  ThemeColorShadow,
-  ThemeColorState_v2,
-  ThemeColorButton_v2,
-  ThemeColorButtonMode_v2,
-  ThemeColorButtonTone_v2,
-  ThemeColorAvatarHue_v2,
-  ThemeColorInput_v2,
-  ThemeColorInputMode_v2,
-  ThemeColorInputState_v2,
-  THEME_COLOR_CARD_TONES,
-} from '../system'
-import {ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
+import { ThemeColorBadgeTokens, ThemeColorStateTokens } from '../config/tokens/color/types'
+import { ThemeConfig } from '../config/types'
+import { THEME_COLOR_BUTTON_MODES, THEME_COLOR_STATES, THEME_COLOR_STATE_TONES, THEME_COLOR_CARD_TONES } from '../system/color/_constants'
+import { ThemeColorAvatarColorKey, ThemeColorCardToneKey, ThemeColorButtonModeKey, ThemeColorStateKey, ThemeColorStateToneKey, ThemeColorSchemeKey } from '../system/color/_system'
+import { ThemeColorAvatar_v2, ThemeColorAvatarHue_v2 } from '../system/color/avatar'
+import { ThemeColorBadge_v2 } from '../system/color/badge'
+import { ThemeColorSyntax } from '../system/color/syntax'
+import { ThemeColorSchemes_v2, ThemeColorScheme_v2, ThemeColorCard_v2 } from '../system/color/color'
+import { ThemeColorShadow } from '../system/color/shadow'
+import { ThemeColorState_v2 } from '../system/color/state'
+import { ThemeColorButton_v2, ThemeColorButtonMode_v2, ThemeColorButtonTone_v2 } from '../system/color/button'
+import { ThemeColorInput_v2, ThemeColorInputMode_v2, ThemeColorInputState_v2 } from '../system/color/input'
+import { ColorTokenContext } from './colorToken/types'
+import { resolveColorTokenValue as _color } from './colorToken/colorToken'
 import {resolveColorTokens} from './resolveColorTokens'
 
 export function buildColorTheme(config?: ThemeConfig): ThemeColorSchemes_v2 {
diff --git a/src/theme/build/buildTheme.ts b/src/theme/build/buildTheme.ts
index e7cf1c94a..3fb3a31d3 100644
--- a/src/theme/build/buildTheme.ts
+++ b/src/theme/build/buildTheme.ts
@@ -1,8 +1,8 @@
-import {ThemeConfig} from '../config'
+import { ThemeConfig } from '../config/types'
 import {defaultThemeConfig} from '../defaults/config'
 import {defaultThemeFonts} from '../defaults/fonts'
-import {RootTheme, RootTheme_v2} from '../system'
-import {v2_v0} from '../versioning'
+import { RootTheme, RootTheme_v2 } from '../system/theme'
+import { v2_v0 } from '../versioning/v2_v0'
 import {buildColorTheme} from './buildColorTheme'
 import {renderThemeColorSchemes} from './renderColorTheme'
 
diff --git a/src/theme/build/colorToken/colorToken.ts b/src/theme/build/colorToken/colorToken.ts
index 757ac2b80..03d676212 100644
--- a/src/theme/build/colorToken/colorToken.ts
+++ b/src/theme/build/colorToken/colorToken.ts
@@ -1,4 +1,5 @@
-import {ThemeColorTokenValue, parseTokenValue} from '../../config'
+import { ThemeColorTokenValue } from '../../config/system'
+import { parseTokenValue } from '../../config/tokens/parseTokenValue'
 import {compileColorTokenValue} from './compileColorToken'
 import {ColorTokenContext} from './types'
 
diff --git a/src/theme/build/colorToken/compileColorToken.ts b/src/theme/build/colorToken/compileColorToken.ts
index 971ccddba..9df759743 100644
--- a/src/theme/build/colorToken/compileColorToken.ts
+++ b/src/theme/build/colorToken/compileColorToken.ts
@@ -1,4 +1,4 @@
-import {TokenColorValueNode} from '../../config'
+import { TokenColorValueNode } from '../../config/tokens/types'
 
 export function compileColorTokenValue(node: TokenColorValueNode): string {
   let key = ''
diff --git a/src/theme/build/lib/color-fns/color-fns.test.ts b/src/theme/build/lib/color-fns/color-fns.test.ts
index 50414e53b..498d3babe 100644
--- a/src/theme/build/lib/color-fns/color-fns.test.ts
+++ b/src/theme/build/lib/color-fns/color-fns.test.ts
@@ -1,6 +1,7 @@
 /** @jest-environment jsdom */
 
-import {multiply, screen} from './blend'
+import { multiply } from './blend/multiply'
+import { screen } from './blend/screen'
 import {hexToRgb, rgbToHex} from './convert'
 import {parseColor} from './parse'
 import {rgba} from './rgba'
diff --git a/src/theme/build/mixThemeColor.ts b/src/theme/build/mixThemeColor.ts
index f07125245..0abddc145 100644
--- a/src/theme/build/mixThemeColor.ts
+++ b/src/theme/build/mixThemeColor.ts
@@ -1,4 +1,8 @@
-import {RGB, multiply, parseColor, rgbToHex, screen} from './lib/color-fns'
+import { RGB } from './lib/color-fns/types'
+import { multiply } from './lib/color-fns/blend/multiply'
+import { parseColor } from './lib/color-fns/parse'
+import { rgbToHex } from './lib/color-fns/convert'
+import { screen } from './lib/color-fns/blend/screen'
 import {clamp, range} from './lib/utils'
 
 const RGB_RANGE: [number, number] = [0, 255]
diff --git a/src/theme/build/renderColorTheme.ts b/src/theme/build/renderColorTheme.ts
index d9f6b1c1c..3a4a52056 100644
--- a/src/theme/build/renderColorTheme.ts
+++ b/src/theme/build/renderColorTheme.ts
@@ -1,29 +1,18 @@
 import {COLOR_HUES} from '@sanity/color'
-import {ThemeColorPalette, ThemeConfig} from '../config'
+import { ThemeColorPalette, ThemeConfig } from '../config/types'
 import {defaultColorPalette} from '../defaults/colorPalette'
-import {
-  THEME_COLOR_STATE_TONES,
-  ThemeColorAvatar_v2,
-  ThemeColorBadgeTone_v2,
-  ThemeColorBadge_v2,
-  ThemeColorBlendModeKey,
-  ThemeColorButtonMode_v2,
-  ThemeColorButtonTone_v2,
-  ThemeColorButton_v2,
-  ThemeColorCardToneKey,
-  ThemeColorCard_v2,
-  ThemeColorInputMode_v2,
-  ThemeColorInputState_v2,
-  ThemeColorInput_v2,
-  ThemeColorKBD,
-  ThemeColorScheme_v2,
-  ThemeColorSchemes_v2,
-  ThemeColorSelectableTone_v2,
-  ThemeColorSelectable_v2,
-  ThemeColorShadow,
-  ThemeColorState_v2,
-  ThemeColorSyntax,
-} from '../system'
+import { THEME_COLOR_STATE_TONES } from '../system/color/_constants'
+import { ThemeColorAvatar_v2 } from '../system/color/avatar'
+import { ThemeColorBadgeTone_v2, ThemeColorBadge_v2 } from '../system/color/badge'
+import { ThemeColorBlendModeKey, ThemeColorCardToneKey } from '../system/color/_system'
+import { ThemeColorButtonMode_v2, ThemeColorButtonTone_v2, ThemeColorButton_v2 } from '../system/color/button'
+import { ThemeColorCard_v2, ThemeColorScheme_v2, ThemeColorSchemes_v2 } from '../system/color/color'
+import { ThemeColorInputMode_v2, ThemeColorInputState_v2, ThemeColorInput_v2 } from '../system/color/input'
+import { ThemeColorKBD } from '../system/color/kbd'
+import { ThemeColorSelectableTone_v2, ThemeColorSelectable_v2 } from '../system/color/selectable'
+import { ThemeColorShadow } from '../system/color/shadow'
+import { ThemeColorState_v2 } from '../system/color/state'
+import { ThemeColorSyntax } from '../system/color/syntax'
 import {RenderColorValueOptions, renderColorValue} from './renderColorValue'
 
 export function renderThemeColorSchemes(
diff --git a/src/theme/build/renderColorValue.ts b/src/theme/build/renderColorValue.ts
index 73a14ebe0..bd4c18c52 100644
--- a/src/theme/build/renderColorValue.ts
+++ b/src/theme/build/renderColorValue.ts
@@ -1,7 +1,10 @@
 import {ColorTint as ColorPaletteValue} from '@sanity/color'
-import {ThemeColorPalette, parseTokenValue} from '../config'
-import {ThemeColorBlendModeKey} from '../system'
-import {hexToRgb, mix, rgbToHex, rgba} from './lib/color-fns'
+import { ThemeColorPalette } from '../config/types'
+import { parseTokenValue } from '../config/tokens/parseTokenValue'
+import { ThemeColorBlendModeKey } from '../system/color/_system'
+import { hexToRgb, rgbToHex } from './lib/color-fns/convert'
+import { mix } from './lib/color-fns/blend/mix'
+import { rgba } from './lib/color-fns/rgba'
 import {mixThemeColor} from './mixThemeColor'
 
 export interface RenderColorValueOptions {
diff --git a/src/theme/build/resolveColorTokens.ts b/src/theme/build/resolveColorTokens.ts
index 07073247a..8e7ea1727 100644
--- a/src/theme/build/resolveColorTokens.ts
+++ b/src/theme/build/resolveColorTokens.ts
@@ -1,32 +1,9 @@
 import {COLOR_HUES, ColorHueKey} from '@sanity/color'
-import {
-  ColorConfigCardTone,
-  ColorConfigInputMode,
-  ColorConfigInputState,
-  ColorConfigStateTone,
-  ThemeColorAvatarTokens,
-  ThemeColorBadgeTokens,
-  ThemeColorBaseTokens,
-  ThemeColorButtonTokens,
-  ThemeColorInputStateTokens,
-  ThemeColorInputTokens,
-  ThemeColorStateTokens,
-  ThemeColorStatesTokens,
-  ThemeColorTokens,
-} from '../config'
+import { ColorConfigCardTone, ColorConfigInputMode, ColorConfigInputState, ColorConfigStateTone } from '../config/system'
+import { ThemeColorAvatarTokens, ThemeColorBadgeTokens, ThemeColorBaseTokens, ThemeColorButtonTokens, ThemeColorInputStateTokens, ThemeColorInputTokens, ThemeColorStateTokens, ThemeColorStatesTokens, ThemeColorTokens } from '../config/tokens/color/types'
 import {defaultColorTokens} from '../defaults/colorTokens'
-import {
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_INPUT_MODES,
-  THEME_COLOR_INPUT_STATES,
-  THEME_COLOR_STATES,
-  THEME_COLOR_STATE_TONES,
-  ThemeColorCardToneKey,
-  ThemeColorButtonModeKey,
-  ThemeColorStateKey,
-  ThemeColorStateToneKey,
-} from '../system'
+import { THEME_COLOR_CARD_TONES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES, THEME_COLOR_STATES, THEME_COLOR_STATE_TONES } from '../system/color/_constants'
+import { ThemeColorCardToneKey, ThemeColorButtonModeKey, ThemeColorStateKey, ThemeColorStateToneKey } from '../system/color/_system'
 import {merge} from './merge'
 
 /**
diff --git a/src/theme/build/theme.test.ts b/src/theme/build/theme.test.ts
index 5cb273026..898f13846 100644
--- a/src/theme/build/theme.test.ts
+++ b/src/theme/build/theme.test.ts
@@ -1,5 +1,5 @@
 import {buildTheme} from './buildTheme'
-import {getContrastRatio} from './lib/color-fns'
+import { getContrastRatio } from './lib/color-fns/contrastRatio'
 
 const AA_MIN = 4.5
 
diff --git a/src/theme/config/helpers.ts b/src/theme/config/helpers.ts
index c3be7af87..166f96c31 100644
--- a/src/theme/config/helpers.ts
+++ b/src/theme/config/helpers.ts
@@ -12,7 +12,7 @@ import {
   ColorConfigStateTone,
   ColorConfigValue,
 } from './system'
-import {parseTokenValue} from './tokens'
+import { parseTokenValue } from './tokens/parseTokenValue'
 
 /** @internal */
 export function isColorConfigBaseTone(str: string): str is ColorConfigCardTone {
diff --git a/src/theme/config/system.ts b/src/theme/config/system.ts
index 7289c1f3d..2467c9200 100644
--- a/src/theme/config/system.ts
+++ b/src/theme/config/system.ts
@@ -1,13 +1,6 @@
 import {ColorHueKey, ColorTintKey} from '@sanity/color'
-import {
-  THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_INPUT_MODES,
-  THEME_COLOR_INPUT_STATES,
-  THEME_COLOR_STATES,
-  THEME_COLOR_STATE_TONES,
-  ThemeColorBlendModeKey,
-} from '../system'
+import { THEME_COLOR_AVATAR_COLORS, THEME_COLOR_CARD_TONES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES, THEME_COLOR_STATES, THEME_COLOR_STATE_TONES } from '../system/color/_constants'
+import { ThemeColorBlendModeKey } from '../system/color/_system'
 
 /** @public */
 export const COLOR_CONFIG_STATE_KEYS = [
diff --git a/src/theme/config/tokens/color/types.ts b/src/theme/config/tokens/color/types.ts
index d9301c044..29e7f529e 100644
--- a/src/theme/config/tokens/color/types.ts
+++ b/src/theme/config/tokens/color/types.ts
@@ -1,5 +1,6 @@
 import {ColorHueKey} from '@sanity/color'
-import {ThemeColorSyntax, ThemeColorButtonModeKey, ThemeColorStateToneKey} from '../../../system'
+import { ThemeColorSyntax } from '../../../system/color/syntax'
+import { ThemeColorButtonModeKey, ThemeColorStateToneKey } from '../../../system/color/_system'
 import {
   ColorBlendModeTokenValue,
   ColorConfigCardTone,
diff --git a/src/theme/config/tokens/parseTokenKey.ts b/src/theme/config/tokens/parseTokenKey.ts
index 98a9b473c..26dfd855b 100644
--- a/src/theme/config/tokens/parseTokenKey.ts
+++ b/src/theme/config/tokens/parseTokenKey.ts
@@ -1,4 +1,4 @@
-import {isColorButtonMode} from '../../system'
+import { isColorButtonMode } from '../../system/color/_helpers'
 import {
   isColorConfigBaseKey,
   isColorConfigBaseTone,
diff --git a/src/theme/config/tokens/parseTokenValue.ts b/src/theme/config/tokens/parseTokenValue.ts
index e96995c39..2b28bec91 100644
--- a/src/theme/config/tokens/parseTokenValue.ts
+++ b/src/theme/config/tokens/parseTokenValue.ts
@@ -1,4 +1,4 @@
-import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../system'
+import { isColorBlendModeValue, isColorHueKey, isColorTintKey } from '../../system/color/_helpers'
 import {isColorOpacityValue, isColorValue} from '../helpers'
 import {TokenValueNode} from './types'
 
diff --git a/src/theme/config/tokens/types.ts b/src/theme/config/tokens/types.ts
index eaed8a713..39915be31 100644
--- a/src/theme/config/tokens/types.ts
+++ b/src/theme/config/tokens/types.ts
@@ -1,5 +1,5 @@
 import {ColorHueKey, ColorTintKey} from '@sanity/color'
-import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../system'
+import { ThemeColorBlendModeKey, ThemeColorButtonModeKey } from '../../system/color/_system'
 import {
   ColorConfigCardKey,
   ColorConfigCardTone,
diff --git a/src/theme/config/types.ts b/src/theme/config/types.ts
index 4d1adf96d..d67b96282 100644
--- a/src/theme/config/types.ts
+++ b/src/theme/config/types.ts
@@ -1,15 +1,12 @@
 import {ColorHueKey, ColorTint as ColorPaletteValue, ColorTintKey} from '@sanity/color'
-import {
-  ThemeAvatar_v2,
-  ThemeFocusRing,
-  ThemeFontWeightKey,
-  ThemeFonts,
-  ThemeInput_v2,
-  ThemeLayer,
-  ThemeShadow,
-  ThemeStyles,
-} from '../system'
-import {ThemeColorTokens} from './tokens'
+import { ThemeAvatar_v2 } from '../system/avatar'
+import { ThemeFocusRing } from '../system/focusRing'
+import { ThemeFontWeightKey, ThemeFonts } from '../system/font'
+import { ThemeInput_v2 } from '../system/input'
+import { ThemeLayer } from '../system/layer'
+import { ThemeShadow } from '../system/shadow'
+import { ThemeStyles } from '../system/styles'
+import { ThemeColorTokens } from './tokens/color/types'
 
 /** @public */
 export type ThemeColorPalette = {
diff --git a/src/theme/defaults/colorPalette.ts b/src/theme/defaults/colorPalette.ts
index baf980b1c..e2e1fb465 100644
--- a/src/theme/defaults/colorPalette.ts
+++ b/src/theme/defaults/colorPalette.ts
@@ -1,5 +1,5 @@
 import {color} from '@sanity/color'
 
-import {ThemeColorPalette} from '../config'
+import { ThemeColorPalette } from '../config/types'
 
 export const defaultColorPalette: ThemeColorPalette = color
diff --git a/src/theme/defaults/colorTokens.ts b/src/theme/defaults/colorTokens.ts
index d1493fa6f..dcf659383 100644
--- a/src/theme/defaults/colorTokens.ts
+++ b/src/theme/defaults/colorTokens.ts
@@ -1,4 +1,4 @@
-import {ThemeColorTokens} from '../config'
+import { ThemeColorTokens } from '../config/tokens/color/types'
 
 export const defaultColorTokens: ThemeColorTokens = {
   base: {
diff --git a/src/theme/defaults/config.ts b/src/theme/defaults/config.ts
index 77ea1d5b4..e55aa8fb9 100644
--- a/src/theme/defaults/config.ts
+++ b/src/theme/defaults/config.ts
@@ -1,4 +1,4 @@
-import {RootTheme_v2} from '../system'
+import { RootTheme_v2 } from '../system/theme'
 
 const BORDER_WIDTH = 1
 const OUTLINE_WIDTH = 0.5
diff --git a/src/theme/defaults/fonts.ts b/src/theme/defaults/fonts.ts
index fa8f84960..9883c1cdd 100644
--- a/src/theme/defaults/fonts.ts
+++ b/src/theme/defaults/fonts.ts
@@ -1,4 +1,4 @@
-import {ThemeFonts} from '../system'
+import { ThemeFonts } from '../system/font'
 
 export const defaultThemeFonts: ThemeFonts = {
   code: {
diff --git a/src/theme/getScopedTheme.ts b/src/theme/getScopedTheme.ts
index df7c898ce..718ce4964 100644
--- a/src/theme/getScopedTheme.ts
+++ b/src/theme/getScopedTheme.ts
@@ -1,13 +1,10 @@
 import {defaultThemeConfig} from './defaults/config'
-import {
-  RootTheme,
-  RootTheme_v2,
-  Theme,
-  ThemeColor,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-} from './system'
-import {is_v2, v0_v2, v2_v0} from './versioning'
+import { RootTheme, RootTheme_v2, Theme } from './system/theme'
+import { ThemeColor } from './system/v0/color/color'
+import { ThemeColorCardToneKey, ThemeColorSchemeKey } from './system/color/_system'
+import { is_v2 } from './versioning/is_v2'
+import { v0_v2 } from './versioning/v0_v2'
+import { v2_v0 } from './versioning/v2_v0'
 import {themeColor_v0_v2_9} from './versioning/themeColor_v2_v2_9'
 
 // cache[scheme][tone][rootTheme] = theme
diff --git a/src/theme/system/theme.ts b/src/theme/system/theme.ts
index 9300f499d..6aeb939c4 100644
--- a/src/theme/system/theme.ts
+++ b/src/theme/system/theme.ts
@@ -1,12 +1,14 @@
 import {ThemeAvatar_v2} from './avatar'
-import {ThemeColorSchemes_v2, ThemeColorCard_v2} from './color'
+import { ThemeColorSchemes_v2, ThemeColorCard_v2 } from './color/color'
 import {ThemeFocusRing} from './focusRing'
 import {ThemeFontWeightKey, ThemeFonts} from './font'
 import {ThemeInput_v2} from './input'
 import {ThemeLayer} from './layer'
 import {ThemeShadow} from './shadow'
 import {ThemeStyles} from './styles'
-import {ThemeAvatar, ThemeColor, ThemeColorSchemes, ThemeInput} from './v0'
+import { ThemeAvatar } from './v0/avatar'
+import { ThemeColor, ThemeColorSchemes } from './v0/color/color'
+import { ThemeInput } from './v0/input'
 
 /**
  * @public
diff --git a/src/theme/system/v0/color/color.ts b/src/theme/system/v0/color/color.ts
index 9e8528c3b..4b3d0a38e 100644
--- a/src/theme/system/v0/color/color.ts
+++ b/src/theme/system/v0/color/color.ts
@@ -1,4 +1,5 @@
-import {ThemeColorSchemeKey, ThemeColorSyntax} from '../../color'
+import { ThemeColorSchemeKey } from '../../color/_system'
+import { ThemeColorSyntax } from '../../color/syntax'
 import {ThemeColorGenericState} from './_generic'
 import {ThemeColorName} from './_system'
 import {ThemeColorBase} from './base'
diff --git a/src/theme/versioning/getTheme_v2.ts b/src/theme/versioning/getTheme_v2.ts
index 41539dedc..ec085d1c0 100644
--- a/src/theme/versioning/getTheme_v2.ts
+++ b/src/theme/versioning/getTheme_v2.ts
@@ -1,5 +1,5 @@
 import {defaultThemeConfig} from '../defaults/config'
-import {Theme, Theme_v2} from '../system'
+import { Theme, Theme_v2 } from '../system/theme'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<Theme, Theme_v2>()
diff --git a/src/theme/versioning/is_v0.ts b/src/theme/versioning/is_v0.ts
index 595cc980e..3d2d3486a 100644
--- a/src/theme/versioning/is_v0.ts
+++ b/src/theme/versioning/is_v0.ts
@@ -1,4 +1,4 @@
-import {RootTheme, RootTheme_v2} from '../system'
+import { RootTheme, RootTheme_v2 } from '../system/theme'
 
 /** @internal */
 export function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme {
diff --git a/src/theme/versioning/is_v2.ts b/src/theme/versioning/is_v2.ts
index 76ee9b76d..c3b77ae90 100644
--- a/src/theme/versioning/is_v2.ts
+++ b/src/theme/versioning/is_v2.ts
@@ -1,4 +1,4 @@
-import {RootTheme, RootTheme_v2} from '../system'
+import { RootTheme, RootTheme_v2 } from '../system/theme'
 
 /** @internal */
 export function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2 {
diff --git a/src/theme/versioning/themeColor_v0_v2.ts b/src/theme/versioning/themeColor_v0_v2.ts
index d88998270..06e13ef1e 100644
--- a/src/theme/versioning/themeColor_v0_v2.ts
+++ b/src/theme/versioning/themeColor_v0_v2.ts
@@ -1,15 +1,11 @@
-import {
-  ThemeColor,
-  ThemeColorGenericState,
-  ThemeColorMuted,
-  ThemeColorSelectable_v2,
-  ThemeColorState_v2,
-  ThemeColorCard_v2,
-  ThemeColorInputStates,
-  ThemeColorInputMode_v2,
-  ThemeColorInputState,
-  ThemeColorInputState_v2,
-} from '../system'
+import { ThemeColor } from '../system/v0/color/color'
+import { ThemeColorGenericState } from '../system/v0/color/_generic'
+import { ThemeColorMuted } from '../system/v0/color/muted'
+import { ThemeColorSelectable_v2 } from '../system/color/selectable'
+import { ThemeColorState_v2 } from '../system/color/state'
+import { ThemeColorCard_v2 } from '../system/color/color'
+import { ThemeColorInputStates, ThemeColorInputState } from '../system/v0/color/input'
+import { ThemeColorInputMode_v2, ThemeColorInputState_v2 } from '../system/color/input'
 
 const cache = new WeakMap<ThemeColor, ThemeColorCard_v2>()
 
diff --git a/src/theme/versioning/themeColor_v2_v2_9.ts b/src/theme/versioning/themeColor_v2_v2_9.ts
index e3b264f01..89fb96e0a 100644
--- a/src/theme/versioning/themeColor_v2_v2_9.ts
+++ b/src/theme/versioning/themeColor_v2_v2_9.ts
@@ -1,4 +1,4 @@
-import type {ThemeColorCard_v2} from '../system'
+import type { ThemeColorCard_v2 } from '../system/color/color'
 
 /**
  * Apply `neutral` and `suggest` if they're not already part of the color object,
diff --git a/src/theme/versioning/v0_v2.ts b/src/theme/versioning/v0_v2.ts
index 0c7badc1c..d28874cb0 100644
--- a/src/theme/versioning/v0_v2.ts
+++ b/src/theme/versioning/v0_v2.ts
@@ -1,5 +1,5 @@
 import {defaultThemeConfig} from '../defaults/config'
-import {RootTheme, RootTheme_v2} from '../system'
+import { RootTheme, RootTheme_v2 } from '../system/theme'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<RootTheme, RootTheme_v2>()
diff --git a/src/theme/versioning/v2_v0.ts b/src/theme/versioning/v2_v0.ts
index abf1aa694..030c0adaa 100644
--- a/src/theme/versioning/v2_v0.ts
+++ b/src/theme/versioning/v2_v0.ts
@@ -1,13 +1,8 @@
-import {
-  RootTheme,
-  RootTheme_v2,
-  ThemeColor,
-  ThemeColorCard_v2,
-  ThemeColorInputMode_v2,
-  ThemeColorInputState,
-  ThemeColorInputState_v2,
-  ThemeColorInputStates,
-} from '../system'
+import { RootTheme, RootTheme_v2 } from '../system/theme'
+import { ThemeColor } from '../system/v0/color/color'
+import { ThemeColorCard_v2 } from '../system/color/color'
+import { ThemeColorInputMode_v2, ThemeColorInputState_v2 } from '../system/color/input'
+import { ThemeColorInputState, ThemeColorInputStates } from '../system/v0/color/input'
 
 const cache = new WeakMap<RootTheme_v2, RootTheme>()
 
diff --git a/stories/components/Autocomplete.stories.tsx b/stories/components/Autocomplete.stories.tsx
index 3c64e6ba2..4b80babdb 100644
--- a/stories/components/Autocomplete.stories.tsx
+++ b/stories/components/Autocomplete.stories.tsx
@@ -1,7 +1,7 @@
 import {SearchIcon} from '@sanity/icons'
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
-import {Autocomplete} from '../../src/core/components'
-import {Card} from '../../src/core/primitives'
+import { Autocomplete } from '../../src/core/components/autocomplete/autocomplete'
+import { Card } from '../../src/core/primitives/card/card'
 import {RADII} from '../constants'
 import {rowBuilder} from '../helpers/rowBuilder'
 
diff --git a/stories/components/Breadcrumbs.stories.tsx b/stories/components/Breadcrumbs.stories.tsx
index dff0c6745..c8c9a35d6 100644
--- a/stories/components/Breadcrumbs.stories.tsx
+++ b/stories/components/Breadcrumbs.stories.tsx
@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Breadcrumbs} from '../../src/core/components'
-import {Text} from '../../src/core/primitives'
+import { Breadcrumbs } from '../../src/core/components/breadcrumbs/breadcrumbs'
+import { Text } from '../../src/core/primitives/text/text'
 import {getSpaceControls} from '../controls'
 
 const meta: Meta<typeof Breadcrumbs> = {
diff --git a/stories/components/CodeSkeleton.stories.tsx b/stories/components/CodeSkeleton.stories.tsx
index f8c704ef3..3ee2d6c1b 100644
--- a/stories/components/CodeSkeleton.stories.tsx
+++ b/stories/components/CodeSkeleton.stories.tsx
@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {CodeSkeleton, Skeleton} from '../../src/core/components'
+import { CodeSkeleton } from '../../src/core/components/skeleton/textSkeleton'
+import { Skeleton } from '../../src/core/components/skeleton/skeleton'
 import {defaultThemeFonts} from '../../src/theme/defaults/fonts'
 import {getFontSizeControls, getSpaceControls} from '../controls'
 import {columnBuilder} from '../helpers/columnBuilder'
diff --git a/stories/components/Dialog.stories.tsx b/stories/components/Dialog.stories.tsx
index b4b6b2e9c..e9076002f 100644
--- a/stories/components/Dialog.stories.tsx
+++ b/stories/components/Dialog.stories.tsx
@@ -2,9 +2,16 @@
 import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons'
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
 import {useCallback, useState} from 'react'
-import {Dialog} from '../../src/core/components'
-import {Box, Button, Card, Flex, Inline, Stack, Text} from '../../src/core/primitives'
-import {BoundaryElementProvider, PortalProvider} from '../../src/core/utils'
+import { Dialog } from '../../src/core/components/dialog/dialog'
+import { Box } from '../../src/core/primitives/box/box'
+import { Button } from '../../src/core/primitives/button/button'
+import { Card } from '../../src/core/primitives/card/card'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Inline } from '../../src/core/primitives/inline/inline'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Text } from '../../src/core/primitives/text/text'
+import { BoundaryElementProvider } from '../../src/core/utils/boundaryElement/boundaryElementProvider'
+import { PortalProvider } from '../../src/core/utils/portal/portalProvider'
 import {
   getContainerWidthControls,
   getPositionControls,
diff --git a/stories/components/HeadingSkeleton.stories.tsx b/stories/components/HeadingSkeleton.stories.tsx
index f0c206f6b..bc0a1d3ce 100644
--- a/stories/components/HeadingSkeleton.stories.tsx
+++ b/stories/components/HeadingSkeleton.stories.tsx
@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {HeadingSkeleton, Skeleton} from '../../src/core/components'
+import { HeadingSkeleton } from '../../src/core/components/skeleton/textSkeleton'
+import { Skeleton } from '../../src/core/components/skeleton/skeleton'
 import {defaultThemeFonts} from '../../src/theme/defaults/fonts'
 import {getFontSizeControls, getSpaceControls} from '../controls'
 import {columnBuilder} from '../helpers/columnBuilder'
diff --git a/stories/components/Hotkeys.stories.tsx b/stories/components/Hotkeys.stories.tsx
index c9f530b43..14467de10 100644
--- a/stories/components/Hotkeys.stories.tsx
+++ b/stories/components/Hotkeys.stories.tsx
@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Hotkeys} from '../../src/core/components'
+import { Hotkeys } from '../../src/core/components/hotkeys/hotkeys'
 import {RADII} from '../constants'
 import {rowBuilder} from '../helpers/rowBuilder'
 
diff --git a/stories/components/LabelSkeleton.stories.tsx b/stories/components/LabelSkeleton.stories.tsx
index 7dba5a826..f0111940f 100644
--- a/stories/components/LabelSkeleton.stories.tsx
+++ b/stories/components/LabelSkeleton.stories.tsx
@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {LabelSkeleton, Skeleton} from '../../src/core/components'
+import { LabelSkeleton } from '../../src/core/components/skeleton/textSkeleton'
+import { Skeleton } from '../../src/core/components/skeleton/skeleton'
 import {defaultThemeFonts} from '../../src/theme/defaults/fonts'
 import {getFontSizeControls, getSpaceControls} from '../controls'
 import {columnBuilder} from '../helpers/columnBuilder'
diff --git a/stories/components/Menu.stories.tsx b/stories/components/Menu.stories.tsx
index c13c6dc70..2ad80a9fe 100644
--- a/stories/components/Menu.stories.tsx
+++ b/stories/components/Menu.stories.tsx
@@ -1,9 +1,17 @@
 import {BinaryDocumentIcon, CircleIcon, RestoreIcon} from '@sanity/icons'
 import type {Meta, StoryObj} from '@storybook/react'
 import {fn} from '@storybook/test'
-import {Menu, MenuDivider, MenuGroup, MenuItem} from '../../src/core/components'
-import {Badge, Card, Container, Flex, Stack, Text} from '../../src/core/primitives'
-import {LayerProvider} from '../../src/core/utils'
+import { Menu } from '../../src/core/components/menu/menu'
+import { MenuDivider } from '../../src/core/components/menu/menuDivider'
+import { MenuGroup } from '../../src/core/components/menu/menuGroup'
+import { MenuItem } from '../../src/core/components/menu/menuItem'
+import { Badge } from '../../src/core/primitives/badge/badge'
+import { Card } from '../../src/core/primitives/card/card'
+import { Container } from '../../src/core/primitives/container/container'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Text } from '../../src/core/primitives/text/text'
+import { LayerProvider } from '../../src/core/utils/layer/layerProvider'
 import {getSpaceControls} from '../controls'
 
 const meta: Meta<typeof Menu> = {
diff --git a/stories/components/MenuButton.stories.tsx b/stories/components/MenuButton.stories.tsx
index 95e33f4ec..6f1ac554c 100644
--- a/stories/components/MenuButton.stories.tsx
+++ b/stories/components/MenuButton.stories.tsx
@@ -9,8 +9,17 @@ import {
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from '@storybook/test'
 import {userEvent, within} from '@storybook/test'
-import {Menu, MenuButton, MenuDivider, MenuGroup, MenuItem} from '../../src/core/components'
-import {Box, Button, Card, Flex, Stack, Text} from '../../src/core/primitives'
+import { Menu } from '../../src/core/components/menu/menu'
+import { MenuButton } from '../../src/core/components/menu/menuButton'
+import { MenuDivider } from '../../src/core/components/menu/menuDivider'
+import { MenuGroup } from '../../src/core/components/menu/menuGroup'
+import { MenuItem } from '../../src/core/components/menu/menuItem'
+import { Box } from '../../src/core/primitives/box/box'
+import { Button } from '../../src/core/primitives/button/button'
+import { Card } from '../../src/core/primitives/card/card'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Text } from '../../src/core/primitives/text/text'
 
 const meta: Meta<typeof MenuButton> = {
   args: {
diff --git a/stories/components/MenuItem.stories.tsx b/stories/components/MenuItem.stories.tsx
index 2f8c700d6..2579178c1 100644
--- a/stories/components/MenuItem.stories.tsx
+++ b/stories/components/MenuItem.stories.tsx
@@ -1,7 +1,9 @@
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
-import {Menu, MenuItem} from '../../src/core/components'
-import {Card, Container} from '../../src/core/primitives'
-import {LayerProvider} from '../../src/core/utils'
+import { Menu } from '../../src/core/components/menu/menu'
+import { MenuItem } from '../../src/core/components/menu/menuItem'
+import { Card } from '../../src/core/primitives/card/card'
+import { Container } from '../../src/core/primitives/container/container'
+import { LayerProvider } from '../../src/core/utils/layer/layerProvider'
 import {getSpaceControls} from '../controls'
 
 const meta: Meta<typeof MenuItem> = {
diff --git a/stories/components/Skeleton.stories.tsx b/stories/components/Skeleton.stories.tsx
index fabca15e3..8ea7d7624 100644
--- a/stories/components/Skeleton.stories.tsx
+++ b/stories/components/Skeleton.stories.tsx
@@ -1,12 +1,12 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {
-  Skeleton,
-  HeadingSkeleton,
-  TextSkeleton,
-  CodeSkeleton,
-  LabelSkeleton,
-} from '../../src/core/components'
-import {Flex, Grid, Box, Container, Stack, Card} from '../../src/core/primitives'
+import { Skeleton } from '../../src/core/components/skeleton/skeleton'
+import { HeadingSkeleton, TextSkeleton, CodeSkeleton, LabelSkeleton } from '../../src/core/components/skeleton/textSkeleton'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Grid } from '../../src/core/primitives/grid/grid'
+import { Box } from '../../src/core/primitives/box/box'
+import { Container } from '../../src/core/primitives/container/container'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Card } from '../../src/core/primitives/card/card'
 import {getSpaceControls} from '../controls'
 
 const meta: Meta<typeof Skeleton> = {
diff --git a/stories/components/Tab.stories.tsx b/stories/components/Tab.stories.tsx
index 6d65f65c4..636fad083 100644
--- a/stories/components/Tab.stories.tsx
+++ b/stories/components/Tab.stories.tsx
@@ -1,6 +1,6 @@
 import {SearchIcon} from '@sanity/icons'
 import type {Meta, StoryObj} from '@storybook/react'
-import {Tab} from '../../src/core/components'
+import { Tab } from '../../src/core/components/tab/tab'
 import {BUTTON_TONES} from '../constants'
 import {getFontSizeControls, getIconControls, getSpaceControls} from '../controls'
 import {rowBuilder} from '../helpers/rowBuilder'
diff --git a/stories/components/TabList.stories.tsx b/stories/components/TabList.stories.tsx
index 98dfe643c..174fdd4e6 100644
--- a/stories/components/TabList.stories.tsx
+++ b/stories/components/TabList.stories.tsx
@@ -1,6 +1,7 @@
 import {OkHandIcon, RocketIcon, SunIcon} from '@sanity/icons'
 import type {Meta, StoryObj} from '@storybook/react'
-import {Tab, TabList} from '../../src/core/components'
+import { Tab } from '../../src/core/components/tab/tab'
+import { TabList } from '../../src/core/components/tab/tabList'
 import {getOverflowControls, getSpaceControls} from '../controls'
 
 const meta: Meta<typeof TabList> = {
diff --git a/stories/components/TextSkeleton.stories.tsx b/stories/components/TextSkeleton.stories.tsx
index f6fb18133..14da7ee8d 100644
--- a/stories/components/TextSkeleton.stories.tsx
+++ b/stories/components/TextSkeleton.stories.tsx
@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Skeleton, TextSkeleton} from '../../src/core/components'
+import { Skeleton } from '../../src/core/components/skeleton/skeleton'
+import { TextSkeleton } from '../../src/core/components/skeleton/textSkeleton'
 import {defaultThemeFonts} from '../../src/theme/defaults/fonts'
 import {getFontSizeControls, getSpaceControls} from '../controls'
 import {columnBuilder} from '../helpers/columnBuilder'
diff --git a/stories/components/Toast.stories.tsx b/stories/components/Toast.stories.tsx
index 7919e44b7..bfb79c96e 100644
--- a/stories/components/Toast.stories.tsx
+++ b/stories/components/Toast.stories.tsx
@@ -1,8 +1,14 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
 import {useId} from 'react'
-import {Toast, ToastProvider, useToast} from '../../src/core/components'
-import {Box, Button, Grid, Heading, Inline} from '../../src/core/primitives'
+import { Toast } from '../../src/core/components/toast/toast'
+import { ToastProvider } from '../../src/core/components/toast/toastProvider'
+import { useToast } from '../../src/core/components/toast/useToast'
+import { Box } from '../../src/core/primitives/box/box'
+import { Button } from '../../src/core/primitives/button/button'
+import { Grid } from '../../src/core/primitives/grid/grid'
+import { Heading } from '../../src/core/primitives/heading/heading'
+import { Inline } from '../../src/core/primitives/inline/inline'
 
 const meta: Meta<typeof Toast> = {
   args: {title: 'Toast title', description: 'Toast description'},
diff --git a/stories/components/Tree.stories.tsx b/stories/components/Tree.stories.tsx
index 39c2b0e1e..e17c9e275 100644
--- a/stories/components/Tree.stories.tsx
+++ b/stories/components/Tree.stories.tsx
@@ -1,6 +1,7 @@
 import {BottleIcon, IceCreamIcon, LemonIcon, TrolleyIcon} from '@sanity/icons'
 import type {Meta, StoryObj} from '@storybook/react'
-import {Tree, TreeItem} from '../../src/core/components'
+import { Tree } from '../../src/core/components/tree/tree'
+import { TreeItem } from '../../src/core/components/tree/treeItem'
 import {getSpaceControls} from '../controls'
 
 const meta: Meta<typeof Tree> = {
diff --git a/stories/constants.ts b/stories/constants.ts
index b317def3e..40cec4b37 100644
--- a/stories/constants.ts
+++ b/stories/constants.ts
@@ -1,13 +1,9 @@
-import {
-  BadgeMode,
-  BadgeTone,
-  ButtonMode,
-  ButtonTone,
-  CardTone,
-  Placement,
-  Radius,
-} from '../src/core/types'
-import {buildTheme} from '../src/theme'
+import { BadgeMode, BadgeTone } from '../src/core/types/badge'
+import { ButtonMode, ButtonTone } from '../src/core/types/button'
+import { CardTone } from '../src/core/types/card'
+import { Placement } from '../src/core/types/placement'
+import { Radius } from '../src/core/types/radius'
+import { buildTheme } from '../src/theme/build/buildTheme'
 
 const theme = buildTheme()
 
diff --git a/stories/controls.ts b/stories/controls.ts
index e1d4d1c26..c847b3d25 100644
--- a/stories/controls.ts
+++ b/stories/controls.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import {icons} from '@sanity/icons'
-import {buildTheme, ThemeFontKey} from '../src/theme'
+import { buildTheme } from '../src/theme/build/buildTheme'
+import { ThemeFontKey } from '../src/theme/system/font'
 
 const theme = buildTheme()
 
diff --git a/stories/helpers/columnBuilder.tsx b/stories/helpers/columnBuilder.tsx
index eaf8a6f76..ab0a76736 100644
--- a/stories/helpers/columnBuilder.tsx
+++ b/stories/helpers/columnBuilder.tsx
@@ -1,6 +1,7 @@
 import {ComponentProps, ReactNode} from 'react'
-import {Card, Stack} from '../../src/core/primitives'
-import {ThemeColorSchemeKey} from '../../src/theme'
+import { Card } from '../../src/core/primitives/card/card'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { ThemeColorSchemeKey } from '../../src/theme/system/color/_system'
 
 interface ColumnBuilderProps<T> {
   gap?: ComponentProps<typeof Stack>['space']
diff --git a/stories/helpers/matrixBuilder.tsx b/stories/helpers/matrixBuilder.tsx
index 0c7545b2a..13cbdd2d3 100644
--- a/stories/helpers/matrixBuilder.tsx
+++ b/stories/helpers/matrixBuilder.tsx
@@ -1,5 +1,8 @@
-import {Card, Flex, Grid, Text} from '../../src/core/primitives'
-import {ThemeColorSchemeKey} from '../../src/theme'
+import { Card } from '../../src/core/primitives/card/card'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Grid } from '../../src/core/primitives/grid/grid'
+import { Text } from '../../src/core/primitives/text/text'
+import { ThemeColorSchemeKey } from '../../src/theme/system/color/_system'
 
 interface MatrixBuilderProps<Rows extends string[], Cols extends string[]> {
   scheme?: ThemeColorSchemeKey
diff --git a/stories/helpers/rowBuilder.tsx b/stories/helpers/rowBuilder.tsx
index afe76a589..faafcd3df 100644
--- a/stories/helpers/rowBuilder.tsx
+++ b/stories/helpers/rowBuilder.tsx
@@ -1,6 +1,7 @@
 import {ComponentProps, ReactNode} from 'react'
-import {Card, Flex} from '../../src/core/primitives'
-import {ThemeColorSchemeKey} from '../../src/theme'
+import { Card } from '../../src/core/primitives/card/card'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { ThemeColorSchemeKey } from '../../src/theme/system/color/_system'
 
 interface RowBuilderProps<T> {
   gap?: ComponentProps<typeof Flex>['gap']
diff --git a/stories/primitives/Avatar.stories.tsx b/stories/primitives/Avatar.stories.tsx
index c3091e7ad..ad8134dcd 100644
--- a/stories/primitives/Avatar.stories.tsx
+++ b/stories/primitives/Avatar.stories.tsx
@@ -1,5 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Avatar, Flex, Stack} from '../../src/core/primitives'
+import { Avatar } from '../../src/core/primitives/avatar/avatar'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Stack } from '../../src/core/primitives/stack/stack'
 import {AVATAR_SRC} from '../constants'
 import {getAvatarSizeControls} from '../controls'
 
diff --git a/stories/primitives/AvatarCounter.stories.tsx b/stories/primitives/AvatarCounter.stories.tsx
index 323862a1c..98c9d5c78 100644
--- a/stories/primitives/AvatarCounter.stories.tsx
+++ b/stories/primitives/AvatarCounter.stories.tsx
@@ -1,5 +1,6 @@
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
-import {AvatarCounter, AvatarStack} from '../../src/core/primitives'
+import { AvatarCounter } from '../../src/core/primitives/avatar/avatarCounter'
+import { AvatarStack } from '../../src/core/primitives/avatar/avatarStack'
 import {getAvatarSizeControls} from '../controls'
 
 const meta: Meta<typeof AvatarCounter> = {
diff --git a/stories/primitives/AvatarStack.stories.tsx b/stories/primitives/AvatarStack.stories.tsx
index c57ff29e8..ce05afcf8 100644
--- a/stories/primitives/AvatarStack.stories.tsx
+++ b/stories/primitives/AvatarStack.stories.tsx
@@ -1,5 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Avatar, AvatarCounter, AvatarStack} from '../../src/core/primitives'
+import { Avatar } from '../../src/core/primitives/avatar/avatar'
+import { AvatarCounter } from '../../src/core/primitives/avatar/avatarCounter'
+import { AvatarStack } from '../../src/core/primitives/avatar/avatarStack'
 import {AVATAR_SRC} from '../constants'
 import {getAvatarSizeControls} from '../controls'
 
diff --git a/stories/primitives/Badge.stories.tsx b/stories/primitives/Badge.stories.tsx
index 0bc472424..c740a3081 100644
--- a/stories/primitives/Badge.stories.tsx
+++ b/stories/primitives/Badge.stories.tsx
@@ -1,5 +1,8 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Badge, Card, Flex, Stack} from '../../src/core/primitives'
+import { Badge } from '../../src/core/primitives/badge/badge'
+import { Card } from '../../src/core/primitives/card/card'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Stack } from '../../src/core/primitives/stack/stack'
 import {BADGE_TONES, CARD_TONES, RADII} from '../constants'
 import {getFontSizeControls, getRadiusControls, getSpaceControls} from '../controls'
 import {rowBuilder} from '../helpers/rowBuilder'
diff --git a/stories/primitives/Box.stories.tsx b/stories/primitives/Box.stories.tsx
index f5c5e342d..8d2441d83 100644
--- a/stories/primitives/Box.stories.tsx
+++ b/stories/primitives/Box.stories.tsx
@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Box, Text} from '../../src/core/primitives'
+import { Box } from '../../src/core/primitives/box/box'
+import { Text } from '../../src/core/primitives/text/text'
 import {getSpaceControls} from '../controls'
 
 const meta: Meta<typeof Box> = {
diff --git a/stories/primitives/Button.stories.tsx b/stories/primitives/Button.stories.tsx
index 6371235f7..a2c1f9d03 100644
--- a/stories/primitives/Button.stories.tsx
+++ b/stories/primitives/Button.stories.tsx
@@ -1,6 +1,10 @@
 import {CloseIcon, SearchIcon} from '@sanity/icons'
 import type {Meta, StoryObj} from '@storybook/react'
-import {Button, Flex, Grid, Stack, Text} from '../../src/core/primitives'
+import { Button } from '../../src/core/primitives/button/button'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Grid } from '../../src/core/primitives/grid/grid'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Text } from '../../src/core/primitives/text/text'
 import {BUTTON_MODES, BUTTON_TONES, RADII} from '../constants'
 import {
   getButtonWidthControls,
diff --git a/stories/primitives/Card.stories.tsx b/stories/primitives/Card.stories.tsx
index 49105db81..a987b5a49 100644
--- a/stories/primitives/Card.stories.tsx
+++ b/stories/primitives/Card.stories.tsx
@@ -1,6 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Box, Button, Card, Container, Flex, Grid, Stack, Text} from '../../src/core/primitives'
-import {CardTone} from '../../src/core/types'
+import { Box } from '../../src/core/primitives/box/box'
+import { Button } from '../../src/core/primitives/button/button'
+import { Card } from '../../src/core/primitives/card/card'
+import { Container } from '../../src/core/primitives/container/container'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Grid } from '../../src/core/primitives/grid/grid'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Text } from '../../src/core/primitives/text/text'
+import { CardTone } from '../../src/core/types/card'
 import {CARD_TONES, RADII} from '../constants'
 import {getRadiusControls, getShadowControls, getSpaceControls} from '../controls'
 import {matrixBuilder} from '../helpers/matrixBuilder'
diff --git a/stories/primitives/Checkbox.stories.tsx b/stories/primitives/Checkbox.stories.tsx
index d0cc92fa6..8a1c789ef 100644
--- a/stories/primitives/Checkbox.stories.tsx
+++ b/stories/primitives/Checkbox.stories.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type {Meta, StoryObj} from '@storybook/react'
 import {useCallback, useState} from 'react'
-import {Checkbox, Flex, Stack} from '../../src/core/primitives'
+import { Checkbox } from '../../src/core/primitives/checkbox/checkbox'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Stack } from '../../src/core/primitives/stack/stack'
 import {matrixBuilder} from '../helpers/matrixBuilder'
 
 const meta: Meta<typeof Checkbox> = {
diff --git a/stories/primitives/Code.stories.tsx b/stories/primitives/Code.stories.tsx
index c005f944f..a9579aeb2 100644
--- a/stories/primitives/Code.stories.tsx
+++ b/stories/primitives/Code.stories.tsx
@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Code, Stack} from '../../src/core/primitives'
+import { Code } from '../../src/core/primitives/code/code'
+import { Stack } from '../../src/core/primitives/stack/stack'
 import {getFontSizeControls} from '../controls'
 
 const meta: Meta<typeof Code> = {
diff --git a/stories/primitives/Container.stories.tsx b/stories/primitives/Container.stories.tsx
index 81a5a2f85..5abfa1efb 100644
--- a/stories/primitives/Container.stories.tsx
+++ b/stories/primitives/Container.stories.tsx
@@ -1,5 +1,8 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Card, Container, Stack, Text} from '../../src/core/primitives'
+import { Card } from '../../src/core/primitives/card/card'
+import { Container } from '../../src/core/primitives/container/container'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Text } from '../../src/core/primitives/text/text'
 import {getContainerWidthControls, getHeightControls, getOverflowControls} from '../controls'
 
 const meta: Meta<typeof Container> = {
diff --git a/stories/primitives/Flex.stories.tsx b/stories/primitives/Flex.stories.tsx
index fed623b0e..21d138f31 100644
--- a/stories/primitives/Flex.stories.tsx
+++ b/stories/primitives/Flex.stories.tsx
@@ -1,5 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Card, Flex, Text} from '../../src/core/primitives'
+import { Card } from '../../src/core/primitives/card/card'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Text } from '../../src/core/primitives/text/text'
 import {
   getDirectionControls,
   getFlexAlignControls,
diff --git a/stories/primitives/Grid.stories.tsx b/stories/primitives/Grid.stories.tsx
index 4d475dd48..7e112a5b6 100644
--- a/stories/primitives/Grid.stories.tsx
+++ b/stories/primitives/Grid.stories.tsx
@@ -1,5 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Card, Code, Grid} from '../../src/core/primitives'
+import { Card } from '../../src/core/primitives/card/card'
+import { Code } from '../../src/core/primitives/code/code'
+import { Grid } from '../../src/core/primitives/grid/grid'
 import {getHeightControls, getOverflowControls, getSpaceControls} from '../controls'
 
 const meta: Meta<typeof Grid> = {
diff --git a/stories/primitives/Heading.stories.tsx b/stories/primitives/Heading.stories.tsx
index a6f69191d..b18020e10 100644
--- a/stories/primitives/Heading.stories.tsx
+++ b/stories/primitives/Heading.stories.tsx
@@ -1,6 +1,10 @@
 import {AddCircleIcon} from '@sanity/icons'
 import type {Meta, StoryObj} from '@storybook/react'
-import {Card, Flex, Heading, Stack, Text} from '../../src/core/primitives'
+import { Card } from '../../src/core/primitives/card/card'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Heading } from '../../src/core/primitives/heading/heading'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Text } from '../../src/core/primitives/text/text'
 import {getAlignControls, getFontSizeControls} from '../controls'
 
 const meta: Meta<typeof Heading> = {
diff --git a/stories/primitives/Inline.stories.tsx b/stories/primitives/Inline.stories.tsx
index d8f5efa29..ef54dc7a1 100644
--- a/stories/primitives/Inline.stories.tsx
+++ b/stories/primitives/Inline.stories.tsx
@@ -1,5 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Card, Inline, Text} from '../../src/core/primitives'
+import { Card } from '../../src/core/primitives/card/card'
+import { Inline } from '../../src/core/primitives/inline/inline'
+import { Text } from '../../src/core/primitives/text/text'
 import {getHeightControls, getOverflowControls, getSpaceControls} from '../controls'
 
 const meta: Meta<typeof Inline> = {
diff --git a/stories/primitives/KBD.stories.tsx b/stories/primitives/KBD.stories.tsx
index f1885743f..cd168de54 100644
--- a/stories/primitives/KBD.stories.tsx
+++ b/stories/primitives/KBD.stories.tsx
@@ -1,5 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Card, KBD, Stack} from '../../src/core/primitives'
+import { Card } from '../../src/core/primitives/card/card'
+import { KBD } from '../../src/core/primitives/kbd/kbd'
+import { Stack } from '../../src/core/primitives/stack/stack'
 import {CARD_TONES, RADII} from '../constants'
 import {getFontSizeControls, getRadiusControls, getSpaceControls} from '../controls'
 import {rowBuilder} from '../helpers/rowBuilder'
diff --git a/stories/primitives/Label.stories.tsx b/stories/primitives/Label.stories.tsx
index 37f421395..add986caf 100644
--- a/stories/primitives/Label.stories.tsx
+++ b/stories/primitives/Label.stories.tsx
@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Label, Stack} from '../../src/core/primitives'
+import { Label } from '../../src/core/primitives/label/label'
+import { Stack } from '../../src/core/primitives/stack/stack'
 import {getAlignControls, getFontSizeControls} from '../controls'
 
 const meta: Meta<typeof Label> = {
diff --git a/stories/primitives/Popover.stories.tsx b/stories/primitives/Popover.stories.tsx
index f627a9d9a..649f707ac 100644
--- a/stories/primitives/Popover.stories.tsx
+++ b/stories/primitives/Popover.stories.tsx
@@ -1,7 +1,11 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type {Meta, StoryObj} from '@storybook/react'
 import {useState} from 'react'
-import {Box, Button, Card, Popover, Text} from '../../src/core/primitives'
+import { Box } from '../../src/core/primitives/box/box'
+import { Button } from '../../src/core/primitives/button/button'
+import { Card } from '../../src/core/primitives/card/card'
+import { Popover } from '../../src/core/primitives/popover/popover'
+import { Text } from '../../src/core/primitives/text/text'
 import {PLACEMENT_OPTIONS, RADII} from '../constants'
 import {getRadiusControls, getShadowControls, getSpaceControls} from '../controls'
 import {rowBuilder} from '../helpers/rowBuilder'
diff --git a/stories/primitives/Radio.stories.tsx b/stories/primitives/Radio.stories.tsx
index e0fe9c7d4..629e47e03 100644
--- a/stories/primitives/Radio.stories.tsx
+++ b/stories/primitives/Radio.stories.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type {Meta, StoryObj} from '@storybook/react'
 import {ChangeEvent, useCallback, useState} from 'react'
-import {Flex, Radio, Stack} from '../../src/core/primitives'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Radio } from '../../src/core/primitives/radio/radio'
+import { Stack } from '../../src/core/primitives/stack/stack'
 import {matrixBuilder} from '../helpers/matrixBuilder'
 
 const meta: Meta<typeof Radio> = {
diff --git a/stories/primitives/Select.stories.tsx b/stories/primitives/Select.stories.tsx
index 77d99ce15..1aff389a6 100644
--- a/stories/primitives/Select.stories.tsx
+++ b/stories/primitives/Select.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type {Meta, StoryObj} from '@storybook/react'
-import {Select} from '../../src/core/primitives'
+import { Select } from '../../src/core/primitives/select/select'
 import {RADII} from '../constants'
 import {getFontSizeControls, getRadiusControls, getSpaceControls} from '../controls'
 import {rowBuilder} from '../helpers/rowBuilder'
diff --git a/stories/primitives/Spinner.stories.tsx b/stories/primitives/Spinner.stories.tsx
index 3458d6b5d..55a7372dc 100644
--- a/stories/primitives/Spinner.stories.tsx
+++ b/stories/primitives/Spinner.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type {Meta, StoryObj} from '@storybook/react'
-import {Spinner} from '../../src/core/primitives'
+import { Spinner } from '../../src/core/primitives/spinner/spinner'
 import {getFontSizeControls} from '../controls'
 
 const meta: Meta<typeof Spinner> = {
diff --git a/stories/primitives/Stack.stories.tsx b/stories/primitives/Stack.stories.tsx
index 8d2d2dec1..d1874a7d4 100644
--- a/stories/primitives/Stack.stories.tsx
+++ b/stories/primitives/Stack.stories.tsx
@@ -1,5 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Card, Stack, Text} from '../../src/core/primitives'
+import { Card } from '../../src/core/primitives/card/card'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Text } from '../../src/core/primitives/text/text'
 import {getHeightControls, getOverflowControls, getSpaceControls} from '../controls'
 
 const meta: Meta<typeof Stack> = {
diff --git a/stories/primitives/Switch.stories.tsx b/stories/primitives/Switch.stories.tsx
index e2677bd1a..4ae635182 100644
--- a/stories/primitives/Switch.stories.tsx
+++ b/stories/primitives/Switch.stories.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type {Meta, StoryObj} from '@storybook/react'
 import {useCallback, useState} from 'react'
-import {Flex, Stack, Switch} from '../../src/core/primitives'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Switch } from '../../src/core/primitives/switch/switch'
 import {matrixBuilder} from '../helpers/matrixBuilder'
 
 const meta: Meta<typeof Switch> = {
diff --git a/stories/primitives/Text.stories.tsx b/stories/primitives/Text.stories.tsx
index fc7b996ee..f5c976f3e 100644
--- a/stories/primitives/Text.stories.tsx
+++ b/stories/primitives/Text.stories.tsx
@@ -1,6 +1,9 @@
 import {AddCircleIcon} from '@sanity/icons'
 import type {Meta, StoryObj} from '@storybook/react'
-import {Card, Flex, Stack, Text} from '../../src/core/primitives'
+import { Card } from '../../src/core/primitives/card/card'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Text } from '../../src/core/primitives/text/text'
 import {getAlignControls, getFontSizeControls, getTextOverflowControls} from '../controls'
 
 const meta: Meta<typeof Text> = {
diff --git a/stories/primitives/TextArea.stories.tsx b/stories/primitives/TextArea.stories.tsx
index 7960db10c..09e9f737b 100644
--- a/stories/primitives/TextArea.stories.tsx
+++ b/stories/primitives/TextArea.stories.tsx
@@ -1,5 +1,9 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {Box, Card, Grid, Text, TextArea} from '../../src/core/primitives'
+import { Box } from '../../src/core/primitives/box/box'
+import { Card } from '../../src/core/primitives/card/card'
+import { Grid } from '../../src/core/primitives/grid/grid'
+import { Text } from '../../src/core/primitives/text/text'
+import { TextArea } from '../../src/core/primitives/textArea/textArea'
 import {RADII} from '../constants'
 import {getFontSizeControls, getRadiusControls, getSpaceControls} from '../controls'
 import {rowBuilder} from '../helpers/rowBuilder'
diff --git a/stories/primitives/TextInput.stories.tsx b/stories/primitives/TextInput.stories.tsx
index 091d95f91..45cf578fc 100644
--- a/stories/primitives/TextInput.stories.tsx
+++ b/stories/primitives/TextInput.stories.tsx
@@ -1,7 +1,11 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type {Meta, StoryObj} from '@storybook/react'
 import {useCallback, useState} from 'react'
-import {Box, Container, Grid, Text, TextInput} from '../../src/core/primitives'
+import { Box } from '../../src/core/primitives/box/box'
+import { Container } from '../../src/core/primitives/container/container'
+import { Grid } from '../../src/core/primitives/grid/grid'
+import { Text } from '../../src/core/primitives/text/text'
+import { TextInput } from '../../src/core/primitives/textInput/textInput'
 import {RADII} from '../constants'
 import {
   getFontSizeControls,
diff --git a/stories/primitives/Tooltip.stories.tsx b/stories/primitives/Tooltip.stories.tsx
index f3e546449..3e7631019 100644
--- a/stories/primitives/Tooltip.stories.tsx
+++ b/stories/primitives/Tooltip.stories.tsx
@@ -1,6 +1,10 @@
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
 import {userEvent, within} from '@storybook/test'
-import {Button, Card, Text, Tooltip, TooltipDelayGroupProvider} from '../../src/core/primitives'
+import { Button } from '../../src/core/primitives/button/button'
+import { Card } from '../../src/core/primitives/card/card'
+import { Text } from '../../src/core/primitives/text/text'
+import { Tooltip } from '../../src/core/primitives/tooltip/tooltip'
+import { TooltipDelayGroupProvider } from '../../src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider'
 import {PLACEMENT_OPTIONS} from '../constants'
 import {getShadowControls, getSpaceControls} from '../controls'
 import {rowBuilder} from '../helpers/rowBuilder'
diff --git a/stories/primitives/components/FieldWrapper.tsx b/stories/primitives/components/FieldWrapper.tsx
index b4356572b..b20cfb371 100644
--- a/stories/primitives/components/FieldWrapper.tsx
+++ b/stories/primitives/components/FieldWrapper.tsx
@@ -1,5 +1,6 @@
 import {ReactNode} from 'react'
-import {Stack, Text} from '../../../src/core/primitives'
+import { Stack } from '../../../src/core/primitives/stack/stack'
+import { Text } from '../../../src/core/primitives/text/text'
 
 export const FieldWrapper = ({
   children,
diff --git a/stories/tests/FocusRings.tsx b/stories/tests/FocusRings.tsx
index d551f2de9..74a0370b1 100644
--- a/stories/tests/FocusRings.tsx
+++ b/stories/tests/FocusRings.tsx
@@ -8,32 +8,28 @@ import {
   SunIcon,
 } from '@sanity/icons'
 import {ReactNode} from 'react'
-import {
-  Autocomplete,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  Tab,
-  TabList,
-} from '../../src/core/components'
-import {
-  Avatar,
-  Button,
-  Card,
-  Checkbox,
-  Flex,
-  Heading,
-  Radio,
-  Select,
-  Stack,
-  Switch,
-  Text,
-  TextArea,
-  TextInput,
-} from '../../src/core/primitives'
-import {ThemeProvider} from '../../src/core/theme'
-import {buildTheme} from '../../src/theme'
+import { Autocomplete } from '../../src/core/components/autocomplete/autocomplete'
+import { Menu } from '../../src/core/components/menu/menu'
+import { MenuButton } from '../../src/core/components/menu/menuButton'
+import { MenuDivider } from '../../src/core/components/menu/menuDivider'
+import { MenuItem } from '../../src/core/components/menu/menuItem'
+import { Tab } from '../../src/core/components/tab/tab'
+import { TabList } from '../../src/core/components/tab/tabList'
+import { Avatar } from '../../src/core/primitives/avatar/avatar'
+import { Button } from '../../src/core/primitives/button/button'
+import { Card } from '../../src/core/primitives/card/card'
+import { Checkbox } from '../../src/core/primitives/checkbox/checkbox'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Heading } from '../../src/core/primitives/heading/heading'
+import { Radio } from '../../src/core/primitives/radio/radio'
+import { Select } from '../../src/core/primitives/select/select'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Switch } from '../../src/core/primitives/switch/switch'
+import { Text } from '../../src/core/primitives/text/text'
+import { TextArea } from '../../src/core/primitives/textArea/textArea'
+import { TextInput } from '../../src/core/primitives/textInput/textInput'
+import { ThemeProvider } from '../../src/core/theme/themeProvider'
+import { buildTheme } from '../../src/theme/build/buildTheme'
 
 const theme = buildTheme()
 
diff --git a/stories/tests/Tones.tsx b/stories/tests/Tones.tsx
index e524fc178..bdf481937 100644
--- a/stories/tests/Tones.tsx
+++ b/stories/tests/Tones.tsx
@@ -1,47 +1,41 @@
 import {ReactNode, useState} from 'react'
 
-import {LayerProvider} from '../../src/core'
-import {
-  CodeSkeleton,
-  HeadingSkeleton,
-  Hotkeys,
-  LabelSkeleton,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  Skeleton,
-  Tab,
-  TabList,
-  TextSkeleton,
-} from '../../src/core/components'
-import {
-  Avatar,
-  Badge,
-  Box,
-  Button,
-  Card,
-  Checkbox,
-  Code,
-  Container,
-  Flex,
-  Grid,
-  Heading,
-  Inline,
-  KBD,
-  Label,
-  Popover,
-  Radio,
-  Select,
-  Spinner,
-  Stack,
-  Switch,
-  Text,
-  TextArea,
-  TextInput,
-} from '../../src/core/primitives'
-import {ThemeProvider} from '../../src/core/theme'
-import {buildTheme, ThemeColorSchemeKey} from '../../src/theme'
+import { LayerProvider } from '../../src/core/utils/layer/layerProvider'
+import { CodeSkeleton, HeadingSkeleton, LabelSkeleton, TextSkeleton } from '../../src/core/components/skeleton/textSkeleton'
+import { Hotkeys } from '../../src/core/components/hotkeys/hotkeys'
+import { Menu } from '../../src/core/components/menu/menu'
+import { MenuButton } from '../../src/core/components/menu/menuButton'
+import { MenuDivider } from '../../src/core/components/menu/menuDivider'
+import { MenuItem } from '../../src/core/components/menu/menuItem'
+import { Skeleton } from '../../src/core/components/skeleton/skeleton'
+import { Tab } from '../../src/core/components/tab/tab'
+import { TabList } from '../../src/core/components/tab/tabList'
+import { Avatar } from '../../src/core/primitives/avatar/avatar'
+import { Badge } from '../../src/core/primitives/badge/badge'
+import { Box } from '../../src/core/primitives/box/box'
+import { Button } from '../../src/core/primitives/button/button'
+import { Card } from '../../src/core/primitives/card/card'
+import { Checkbox } from '../../src/core/primitives/checkbox/checkbox'
+import { Code } from '../../src/core/primitives/code/code'
+import { Container } from '../../src/core/primitives/container/container'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Grid } from '../../src/core/primitives/grid/grid'
+import { Heading } from '../../src/core/primitives/heading/heading'
+import { Inline } from '../../src/core/primitives/inline/inline'
+import { KBD } from '../../src/core/primitives/kbd/kbd'
+import { Label } from '../../src/core/primitives/label/label'
+import { Popover } from '../../src/core/primitives/popover/popover'
+import { Radio } from '../../src/core/primitives/radio/radio'
+import { Select } from '../../src/core/primitives/select/select'
+import { Spinner } from '../../src/core/primitives/spinner/spinner'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { Switch } from '../../src/core/primitives/switch/switch'
+import { Text } from '../../src/core/primitives/text/text'
+import { TextArea } from '../../src/core/primitives/textArea/textArea'
+import { TextInput } from '../../src/core/primitives/textInput/textInput'
+import { ThemeProvider } from '../../src/core/theme/themeProvider'
+import { buildTheme } from '../../src/theme/build/buildTheme'
+import { ThemeColorSchemeKey } from '../../src/theme/system/color/_system'
 
 const theme = buildTheme()
 
diff --git a/stories/tokens/ColorPalette.tsx b/stories/tokens/ColorPalette.tsx
index 97e8ab748..31651aa55 100644
--- a/stories/tokens/ColorPalette.tsx
+++ b/stories/tokens/ColorPalette.tsx
@@ -1,9 +1,16 @@
 import {COLOR_HUES, ColorTint, ColorTints, black, hues, white} from '@sanity/color'
 import {ReactNode} from 'react'
 import {styled} from 'styled-components'
-import {Box, Card, Code, Flex, Grid, Heading, Stack} from '../../src/core/primitives'
-import {ThemeProvider} from '../../src/core/theme'
-import {buildTheme, hexToRgb, rgbToHsl} from '../../src/theme'
+import { Box } from '../../src/core/primitives/box/box'
+import { Card } from '../../src/core/primitives/card/card'
+import { Code } from '../../src/core/primitives/code/code'
+import { Flex } from '../../src/core/primitives/flex/flex'
+import { Grid } from '../../src/core/primitives/grid/grid'
+import { Heading } from '../../src/core/primitives/heading/heading'
+import { Stack } from '../../src/core/primitives/stack/stack'
+import { ThemeProvider } from '../../src/core/theme/themeProvider'
+import { buildTheme } from '../../src/theme/build/buildTheme'
+import { hexToRgb, rgbToHsl } from '../../src/theme/build/lib/color-fns/convert'
 
 const theme = buildTheme()
 
diff --git a/tsconfig.dist.json b/tsconfig.dist.json
index f27ca6f95..de95206f6 100644
--- a/tsconfig.dist.json
+++ b/tsconfig.dist.json
@@ -7,14 +7,5 @@
     "./src/**/__workshop__",
     "./src/**/*.test.ts",
     "./src/**/*.test.tsx"
-  ],
-  "compilerOptions": {
-    "sourceMap": true,
-    "rootDir": ".",
-    "outDir": "./dist",
-    "paths": {
-      "@sanity/ui/theme": ["./exports/theme.ts"],
-      "@sanity/ui": ["./exports"]
-    }
-  }
+  ]
 }
diff --git a/tsconfig.json b/tsconfig.json
index 312602b9c..4ed0eeadb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,16 +11,5 @@
     "./typings",
     "./workshop.config.ts",
     "./workshop.runtime.ts"
-  ],
-  "compilerOptions": {
-    "composite": true,
-    "rootDir": ".",
-    "outDir": "./dist/types",
-    "paths": {
-      "@sanity/ui/*": ["./exports/*"],
-      "@sanity/ui": ["./exports"]
-    },
-    // Setting "jsx" to aynthing but "preserve" is usually incorrect, but at the moment Storybook needs it
-    "jsx": "react-jsx"
-  }
+  ]
 }
diff --git a/tsconfig.settings.json b/tsconfig.settings.json
index 6e672bea6..69226d983 100644
--- a/tsconfig.settings.json
+++ b/tsconfig.settings.json
@@ -1,27 +1,14 @@
 {
+  "extends": "@sanity/pkg-utils/tsconfig/strictest.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "Preserve",
-    "moduleDetection": "force",
-    "allowSyntheticDefaultImports": true,
-    "declaration": true,
-    "declarationMap": true,
-    "jsx": "preserve",
-
-    // Strict type-checking
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true,
-    "strictPropertyInitialization": true,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
-
-    // Additional checks
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "skipLibCheck": true
+    "rootDir": ".",
+    "outDir": "./dist",
+    "paths": {
+      "@sanity/ui/theme": ["./exports/theme.ts"],
+      "@sanity/ui": ["./exports"]
+    },
+    "noUncheckedIndexedAccess": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "verbatimModuleSyntax": false
   }
 }
diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts
index 089da9067..d7f8ac48e 100644
--- a/typings/styled-components.d.ts
+++ b/typings/styled-components.d.ts
@@ -1,4 +1,4 @@
-import {type Theme} from '../src/theme'
+import type { Theme } from '../src/theme/system/theme'
 
 declare module 'styled-components' {
   interface DefaultTheme extends Theme {}